Monday, November 12th, 2007

Get rid of the IE iframe “click”

Category: IE, JavaScript, Tip

<p>I am sure you have run into this before. You are on a site, interacting with a single page app, and then you hit the back button and IE clicks at you. The navigation “click” happens with iframes, and be a nuisance if you are trying to use iframes in a non-navigational way.

Julien Lecomte has a work around to by pass it by replacing DOM nodes with new iframes and such:

javascript
< view plain text >
  1. function setIFrameSrc(iframe, src) {
  2.     var el;
  3.     iframe = YAHOO.util.Dom.get(iframe);
  4.     if (YAHOO.env.ua.ie) {
  5.         // Create a new hidden iframe.
  6.         el = iframe.cloneNode(true);
  7.         el.style.position = "absolute";
  8.         el.style.visibility = "hidden";
  9.         // keep the original iframe id unique!
  10.         el.id = "";
  11.         // Listen for the onload event.
  12.         YAHOO.util.Event.addListener(el, "load", function () {
  13.             // First, remove the event listener or the old iframe
  14.             // we intend to discard will not be freed...
  15.             YAHOO.util.Event.removeListener(this, "load", arguments.callee);
  16.             // Show the iframe.
  17.             this.style.position = "";
  18.             this.style.visibility = "";
  19.             // Replace the old iframe with the new one.
  20.             iframe.parentNode.replaceChild(this, iframe);
  21.             // Reset the iframe id.
  22.             this.id = iframe.id;
  23.         });
  24.         // Set its src first...
  25.         el.src = src;
  26.         // ...and then append it to the body of the document.
  27.         document.body.appendChild(el);
  28.     } else {
  29.         iframe.src = src;
  30.     }
  31. }

I loved Julien’s note:

This technique is used by the new Yahoo! Mail (which used to sound like an automatic rifle…:0)

Related Content:

Posted by Dion Almaer at 7:33 am
13 Comments

++++-
4.1 rating from 30 votes

13 Comments »

Comments feed TrackBack URI

What sucks is, this won’t add an entry to the browser history. So you still must have the click if you want to support back/forward button navigation…

Comment by David Bloom — November 12, 2007

It made me think to Macromedia Flash loader (don’t remember its real name) used to load flash objects without having to click for using it in internet explorer.
It uses document.write to create the embed and object tags after the content rendering is started, so Internet explorer don’t lock the flash objects until clicked.

Comment by Benoit — November 12, 2007

I don’t know if it still works, but the solution I used way back in 2001, was setting a 0-byte .wav as background sound:

bgsound src=”zerobyte.wav” loop=”-1″

Comment by Robbert Broersma — November 12, 2007

@Robbert

The bgsound trick does not seem to work (at least not on IE7) Moreover, the bgsound tag is non standard, so it may be better not to use it.

Comment by Julien Lecomte — November 12, 2007

This solution has a problem in Firefox, sometimes this browser thinks the iframe is not loaded and the loading animation on the tabs dont stop.

Comment by Tiago Albineli Motta — November 12, 2007

I am slowing beginning to hate Microsoft.

Comment by EmEhRKay — November 12, 2007

@Tiago

There is a fork based on the user agent (see the setIFrameSrc function) On non-IE browsers (and that includes Firefox obviously), I only set the IFrame src attribute, so your point is invalid.

Comment by Julien Lecomte — November 12, 2007

Or… don’t use dirty IFRAMEs?

Comment by Captain Yoinksac — November 13, 2007

@Captain Yoinksac

True, but sometimes, you don’t have the option of not using IFrames. IFrames can be very useful to sandbox third party content for instance.

Comment by Julien Lecomte — November 13, 2007

Another method I’ve tried was using document.write to insert the iframe. When you click on the back button, it doesn’t do the “click” crap.

Comment by Simon Jia — November 13, 2007

@Simon

While this is true, you will still get the “click” sound when setting the src attribute on the IFrame, which was the point of my article.

Comment by Julien Lecomte — November 13, 2007

Oh, com’on, I’m sure they had a reason for that… Just like when you get “the” Blue screen!

Comment by Web Design NY — November 17, 2007

Try to avoid using IFrame because of the search engines, wrong navigating etc

Comment by dragon2000gh — December 21, 2007

Leave a comment

You must be logged in to post a comment.