Monday, November 12th, 2007
Get rid of the IE iframe “click”
Category: IE
, JavaScript, Tip
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:
-
-
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;
-
}
-
}
-
I loved Julien's note:
This technique is used by the new Yahoo! Mail (which used to sound like an automatic rifle…:0)
4.3 rating from 25 votes
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…
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.
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″
@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.
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.
I am slowing beginning to hate Microsoft.
@Tiago
There is a fork based on the user agent (see the
setIFrameSrcfunction) On non-IE browsers (and that includes Firefox obviously), I only set the IFrame src attribute, so your point is invalid.Or… don’t use dirty IFRAMEs?
@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.
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.
@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.
Oh, com’on, I’m sure they had a reason for that… Just like when you get “the” Blue screen!
Try to avoid using IFrame because of the search engines, wrong navigating etc