4

[SOLVED]

I use to build pages normally without javascript and only then to add javascipt features. This way, I can set all divs with tools that require javascript with display:none and then in the first line on javascript to turn it visible:

<script type="text/javascript">
    $(document).ready(function(){
        $('#jsdivs').show();
    });
</script>

Doing so I get out of the way of people who for any reason have their browsers javascript disabled.

Following this spirit, I'd like to find a way to not load any javascript by default and then, if javascript is enabled have instructions to load the javascript files.

Right now I am loading JQuery like this (for cache reasons, many people may already have this cached):

<script src="http://code.jquery.com/jquery-1.4.4.js"></script>

And another file with all the other javascript minimized. All in the end, just before the HTML body tag.

I saw many opinions here and here but none that help me with this. At first, I'd like to know if that's a good way of getting this done. Thanks a lot.

UPDATE:

  • @Lèse majesté indicated me an old discussion saying that browsers do not load javascript files when it is disabled. As I didn't think the information was enough conclusive, I made some tests disabling javascript in Firefox via the plugin "Web Developer" and YSlow (another FF plugin for Firebug) keeps on showing all javascript information, not mentioning that "Live Headers" (another fantastic FF plugin that shows the headers in realtime) also showed that a _utmc cookie (by the Google Analytics script) was present in the request.

  • @Marcel Korpel made a very good (though apparentely snob) comment, which opened the way for a real solution. he said that Google Analytics uses a "method to dynamically include ga.js. The closing tag (and immediately opening tag) is needed to let the browser update the DOM tree and actually load and execute the added script."

  • With the information on his indication I could come up with this PHP code (I had to put the PHP code in Pastie.org because Stackoverflow was messing with it):

    http://pastie.org/1487432

That prints: 

<script language="javascript" type="text/javascript">
    document.write('\<script src\="js\/minified\.js" type\="text\/javascript"\>\<\/script\>');
</script>

This time YSlow and Live Headers say nothing about any javascript file.

Improve this question
4
  • 1
    You could also use <noscript><style> #jsdivs { display: none; } </style></noscript> to hide them. This way you will run less js, fewer reflows and they will be visible while jQuery is loading (if it doesn`t block rendering). Commented Jan 22, 2011 at 13:57
  • 2
    Anyway, you don't need that if(1==1) comparison, because if code inside script elements is not executed, the code to include an external script file is neither. Commented Jan 22, 2011 at 14:06
  • Hehe, I already feared that someone might consider my remark as snobby or arrogant, though it was not meant that way. ;-) Commented Jan 22, 2011 at 16:21
  • The GA method is probably the most fool-proof. However, cookies should be present regardless of whether JavaScript is enabled or JS files are being downloaded. If disabling JS also disabled cookies, you'd have some serious problems with session handling and other things unrelated to JS that relied on cookies. So it's expected that any pre-existing cookies would continue to be sent by the browser. Commented Jan 23, 2011 at 14:15

2 Answers 2

Reset to default
3

Most browsers don't download linked .js files if JavaScript is disabled. See this question:

Does a browser download JS files if the user has JS disabled?

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

What if javascript is blocked via plugin (like Web Developer, present in Chrome and FF)?
2

You can add javascript files dynamically, but the contents will not be evaluated and not be available to you (since javascript is loaded and parsed once), so this approach will not work as can be seen here.

You can also use server side scripting and avoid writing out script tags if you are able to pass this information (javascript disabled) back to the server on a query string parameter, form field or whatever you like.

However, consider the complexity involved and whether this saves you anything.

To be honest, I don't know how browsers behave regarding these files if javascript is off - it is reasonable to assume (though one should always check) that if javascript is off, no javascript files would be requested either.

Update:

As can be seen here, most browsers do not dowload js files if javascript is disabled.

Improve this answer

9 Comments

You can dynamically include external scripts by adding script elements to the head of the document. Only don't forget to close the current script element.
@Marcel - And these dynamically added scripts get parsed and executed by the JS engine? Can you point me to where this is confirmed?
Frankly, I'm a bit surprised that this question pops up and someone else upvoted it, as I thought this was more or less common knowledge already. Apparently, it's not. E.g., Google Analytics uses this method to dynamically include ga.js. The closing tag (and immediately opening tag) is needed to let the browser update the DOM tree and actually load and execute the added script.
@Marcel - you would be surprised at the amount of information that is not common knowledge that you would expect is.
Yeah, that's true. Even worse, people still point to hopeless internet tutorials and when I say they're bad (with reasons), they admit that they thought they were actually pretty good.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.