Getting Rid of the Navigation Click Sound on IE

Internet Explorer plays a little click sound when the location of a page changes. This is a great usability feature as it lets the user know that something is happening. However, this little click sound can become really annoying with web applications that make extensive use of iframes. For example, imagine an application using several iframes to sandbox untrusted third party ads. Refreshing the content of the iframes (by changing their src attribute) makes the application sound like an automatic rifle. Scary, huh? Well, I recently found out about a very clever trick that can make this click sound go away.

Replace:

iframe.src = "...";

by:

var newIFrame = document.createElement("iframe");
newIFrame.src = "...";
iframe.parentNode.replaceChild(newIframe, iframe);

The secret is to set the iframe src attribute before appending it to the document… However, this simple approach exhibits a very unpleasant flickering. The following snippet shows how to get rid of the flickering as well:

function setIFrameSrc(iframe, src) {
    var el;
    iframe = YAHOO.util.Dom.get(iframe);
    if (YAHOO.env.ua.ie) {
        // Create a new hidden iframe.
        el = iframe.cloneNode(true);
        el.style.position = "absolute";
        el.style.visibility = "hidden";
        // keep the original iframe id unique!
        el.id = "";
        // Listen for the onload event.
        YAHOO.util.Event.addListener(el, "load", function () {
            // First, remove the event listener or the old iframe
            // we intend to discard will not be freed...
            YAHOO.util.Event.removeListener(this, "load", arguments.callee);
            // Show the iframe.
            this.style.position = "";
            this.style.visibility = "";
            // Replace the old iframe with the new one.
            iframe.parentNode.replaceChild(this, iframe);
            // Reset the iframe id.
            this.id = iframe.id;
        });
        // Set its src first...
        el.src = src;
        // ...and then append it to the body of the document.
        document.body.appendChild(el);
    } else {
        iframe.src = src;
    }
}

This example demonstrates this technique (turn the volume up, and open it up with Internet Explorer) Note: the navigation sound you hear when using Internet Explorer (or Windows Explorer) can be configured via the Sounds dialog accessible from the Control Panel.

Update: I forgot to mention that, by using this trick, you will break the back / forward navigation buttons. Therefore, this trick should only be used for a non-navigational purpose only.

7 thoughts on “Getting Rid of the Navigation Click Sound on IE

  1. Pingback: Get rid of the IE iframe “click” « outaTiME

  2. Oliver Clevont

    For me personally the click isn’t as annoying as the short 50ms hang that the browser experiences when it creates a new iframe or changes an iframe’s src. That’s why I hate banner ads and prefer textual ads.

  3. Pingback: Ajax Girl » Blog Archive » Get rid of the IE iframe “click”

  4. Jay

    I’m pretty sure there is a meta tag (or something similiar) for IE to disable this sound.

  5. Julien Lecomte Post author

    Robbert Broersma mentioned that the BGSOUND element might be used for that purpose:

    <BGSOUND src=”zerobyte.wav” loop=”-1″/>

    While this hack may have worked in the past (on older versions of IE), it does not work on IE7 (haven’t tried on recent versions of IE6)

    There does not seem to be anything else that can be used to prevent IE from playing the navigation sound.

  6. Pingback: Javascript News » Blog Archive » Get rid of the IE iframe “click”

  7. ColdFusion Developer

    Thanks so much for the workaround. I’ve been developing some AJAX(ish) applications that will benefit from this tutorial.

Comments are closed.