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.

Community
  • 1
  • 1
Roger
  • 8,286
  • 17
  • 59
  • 77
  • 1
    You could also use 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). – jasssonpet Jan 22 '11 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. – Marcel Korpel Jan 22 '11 at 14:06
  • Hehe, I already feared that someone might consider my remark as snobby or arrogant, though it was not meant that way. ;-) – Marcel Korpel Jan 22 '11 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. – Lèse majesté Jan 23 '11 at 14:15

2 Answers2

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?

Community
  • 1
  • 1
Lèse majesté
  • 7,923
  • 2
  • 33
  • 44
  • What if javascript is blocked via plugin (like Web Developer, present in Chrome and FF)? – Roger Jan 22 '11 at 15:06
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.

Community
  • 1
  • 1
Oded
  • 489,969
  • 99
  • 883
  • 1,009
  • 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 Korpel Jan 22 '11 at 14:09
  • 1
    @Marcel - And these dynamically added scripts get parsed and executed by the JS engine? Can you point me to where this is confirmed? – Oded Jan 22 '11 at 14:11
  • 1
    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](http://code.google.com/apis/analytics/docs/tracking/asyncTracking.html) 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 Korpel Jan 22 '11 at 14:18
  • @Marcel - you would be surprised at the amount of information that is not common knowledge that you would expect is. – Oded Jan 22 '11 at 14:20
  • 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. – Marcel Korpel Jan 22 '11 at 14:23
  • Hehe, that's a pretty good example, especially because of the "W3" part in their name. – Marcel Korpel Jan 22 '11 at 14:25
  • You mean particularly harmful ;) – Oded Jan 22 '11 at 14:29
  • @Marcel, thanks for the clue of G. Analytics which dynamically includes it's code. – Roger Jan 22 '11 at 15:04
  • Oh no, please don't get people into the habit of using `setAttribute` to set those DOM properties (by pointing to that tutorial at javascriptkit.com); someone might actually try to set a `class` in IE and that will not work this way. Let them set properties directly, instead. For instance, take a look at [this answer](http://stackoverflow.com/questions/2049182/can-i-register-external-js-files-on-a-page-via-javascript/2049199#2049199). – Marcel Korpel Jan 22 '11 at 15:10