How to Use Javascripts Implemented in Two Different Browsers

Save

Browser compatibility is one of the oldest headaches for JavaScript coders around the world. There are two ways to allow conditions within your JavaScript to take different paths depending on compatibility: Browser detection and object detection. Browser detection checks with the browser directly to see which make and model it is. This allows you choose which code to run for which browser. Object detection allows you to check if an aspect of the browser's JavaScript language definition exists before trying to use it. Browser detection is an older, more classic solution, whereas object detection may be a more elegant solution.

Browser Detection

  • Write a function that will successfully detect the name of the browser.

    function thisBrowserIs(browserTest){

    if(navigator.userAgent.indexOf(browserTest)!=-1){

    return true;

    }

    }

    This says if it can find the string being passed to this function within the navigator.userAgent property, then return true. You can set browserTest to "MSIE" (Microsoft Internet Explorer), "Firefox," "Safari," "Opera" or "Chrome" when you call the function.

  • Use the function to run browser-specific code.

    if(thisBrowserIs("MSIE")){

    // insert code written for MSIE

    }

    This says if this browser is Microsoft Internet Explorer, then perform any scripts within this condition. As stated before, this could be done with "Firefox," "Safari," "Opera" or "Chrome" instead.

  • Consider other options. This may look simple enough, but it can become a big mess real quick if you want to determine browser version number, or worse, if a new browser comes along that this function was not designed to predict. The more graceful alternative is object detection.

Object Detection

  • Choose an object to detect. Only MSIE has a "document.all" object. Only Opera has a "window.opera" object. Older versions of MSIE do not support the "document.getElementsByClassName" object. However, with object detection, there is not as much need to remember all of that browser compatibility stuff. If you want to use an object that you think may not work in every browser, just make a conditional statement to see if the browser detects its existence before using it.

    if(document.getElementsByClassName){

    This says if the getElementsByClassName object exists, then execute the code within the following brackets.

  • Use the object that was tested for now that the browser is sure it exists, then close the conditional statement.

    myElementArray = document.getElementsByClassName("myClass");

    }

    This says use getElementsByClassName to make an array "myElementArray" of all elements with their class set to "myClass."

  • Use an "else" statement after the "if" condition to include a coding alternative to the object being tested for. This is sometimes optional.

    else{

    // code an alternative to the getElementsByClassName object

    }

References

  • Photo Credit Polka Dot RF/Polka Dot/Getty Images
Promoted By Zergnet

Comments

Resources

You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!