Same Markup: Writing Cross-Browser Code

Live Code Samples

This page contains live versions of the code samples provided as part of my corresponding blog post. Try running these in multiple browsers and modifying the code to observe various results.

Tony Ross
Program Manager

DON'T: Detect Specific Browsers - Event Registration Example

// [TR] Different listeners added for illustration function f1() { document.write("addEventListener was used"); } function f2() { document.write("attachEvent was used"); } // DON'T USE THIS: Detecting specific browsers if(navigator.userAgent.indexOf("MSIE") == -1) { window.addEventListener("load", f1, false); } else { window.attachEvent("onload", f2); } Run Code

IE9 Output: attachEvent was used

DO: Feature Detection - Event Registration Example

// [TR] Different listeners added for illustration function f1() { document.write("addEventListener was used"); } function f2() { document.write("attachEvent was used"); } // Use this: Feature Detection if(window.addEventListener) { window.addEventListener("load", f1, false); } else if(window.attachEvent) { window.attachEvent("onload", f2); } Run Code

IE9 Output: addEventListener was used

DO: Behavior Detection - getElementById Example from jQuery

// We're going to inject a fake input element with a specified name var form = document.createElement("div"), id = "script" + (new Date).getTime(); form.innerHTML = "<a name='" + id + "'/>"; // Inject it into the root element, check its status, and remove it quickly var root = document.documentElement; root.insertBefore( form, root.firstChild ); // The workaround has to do additional checks after a getElementById // Which slows things down for other browsers (hence the branching) if ( document.getElementById( id ) ) { // ... Workaround code ... // [TR] Added for illustration document.write("getElementById workaround was used"); } // [TR] Added for illustration else document.write("No workaround was used"); root.removeChild( form ); Run Code

IE9 Output: No workaround was used

DON'T: Assume Unrelated Features - Real-World Example

// [TR] Try-catch block added to trap the script error in IE8 try { function fn() {} if(window.postMessage) { window.addEventListener("message", fn, false); // [TR] Added for illustration document.write("Message listener registered successfully"); } else { // ... workaround for when postMessage is unavailable ... // [TR] Added for illustration document.write("postMessage is not supported, using workaround"); } } catch(e) { document.write("Message listener registration FAILED"); } Run Code

IE7 Output: postMessage is not supported, using workaround
IE8 Output: Message listener registration FAILED
IE9 Output: Message listener registered successfully

DO: Feature Detection - Test for Unrelated Features Independently

function fn() {} if(window.postMessage) { if(window.addEventListener) { window.addEventListener("message", fn, false); } else if(window.attachEvent) { window.attachEvent("onmessage", fn); } // [TR] Added for illustration document.write("Message listener registered successfully"); } else { // ... workaround for when postMessage is unavailable ... // [TR] Added for illustration document.write("postMessage is not supported, using workaround"); } Run Code

IE7 Output: postMessage is not supported, using workaround
IE8 Output: Message listener registered successfully
IE9 Output: Message listener registered successfully