Boost Module and Browser Detection

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
billp44ruby's picture

Within my template.php file, I do browser detection and if the user is using IE7 or IE8, I load a .js file that works better with those browsers, else I load a different version. Prior to installing the Boost module that worked fine. Now, after installing Boost, the page that is cached depends on the browser loading the page that is cached, which means I'm no longer able to load one .js file versus another depending on browser type.

I assume this is a pretty common issue with page caching, so I'm wondering what method or approach is best used for loading these variable .js files within a page caching framework... if that is possible at all. Without it, I'm not sure how I can use Boost effectively.

Comments

Not really

adaddinsane's picture

Let's just say browser detection is generally a "Bad Thing(tm)".

What you should be doing is delivering only one page which uses conditional comments to load the JS.

Check out this page: http://drupal.org/node/134569

Depending on what the

Jamie Holly's picture

Depending on what the functionality of those JS files is, it might be best to do a single file and perform functions based upon browser version inside of those. Something like:

var ie78 = ($.browser.msie && (parseInt($.browser.version, 10)  > 6 && parseInt($.browser.version, 10) < 9)) ? true : false;

Now you got the ie78 variable in your JS file and can choose the appropriate reaction in your methods.


HollyIT - Grab the Netbeans Drupal Development Tool at GitHub.

Thanks Jamie...

billp44ruby's picture

That sounds like the right approach. Not sure why I didn't use it in the first place!

Or...

matthewv789's picture

You can always use IE conditional comments. It will load the main js for all browsers, but only load a supplementary JS file for IE.

Alternatives

heylookalive's picture

Alternatively you could use the conditional IE comment for the HTML tag as per:
http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-ne...

This means in your CSS you can do:

html.ie7 .class,
html.ie8 .class {
.....
}

This has the benefit of not causing blocking downloads and means your files can be aggregated together instead of having IE specific files.

For JS you could either work off of the above:

// Doc ready
if ($('html.ie7,html.ie8').length > 0) {
  ....
}

OR just use jQuerys built in methods:

// Doc ready
if ($.browser.msie  && parseInt($.browser.version, 10) <= 8) {
....
}

via:
http://stackoverflow.com/questions/3165489/how-to-detect-ie7-with-jquery

Finally if your JS must live in a separate file you could use something like yepnope.js:
http://yepnopejs.com/ (see bit about "ie! Prefix(es)")