Why doesn't IE8 handle iframe onload events?

javascript html iframe internet-explorer-8

17,614

Solution 1

Using inline attribute on iframe seems to fix this issue in IE8:

<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function onIframeLoad(iframe) {
    if(iframe.src) {
        alert('Thanks for the visit!');
    }
}
function onLinkClick(url) {
    document.getElementById('iframe_a').src = url;
}
</script>
</head>
<body>
<iframe id="iframe_a" onload="onIframeLoad(this);"></iframe>
<a href="http://www.example.com/" onclick="onLinkClick(this); return false;">Go!</a>
</body>
</html>

update by request:

You should try writing more unobtrusive javascript. Writing code in such way may prevent you from such strange bugs in IE.

<!DOCTYPE html>
<html>
<body>
    <iframe id="display-frame"></iframe>
    <a href="http://www.example.com/">Go!</a>
    <script>
        window.onload = function() {
            var iframe = document.getElementById('display-frame'),
                link = document.getElementsByTagName('a')[0];

            // load handler
            function onIframeLoad() {
                alert('Thanks for the visit!');
            }

            // event handlers
            if(iframe.addEventListener) iframe.addEventListener('load', onIframeLoad, false);
            else if(iframe.attachEvent) iframe.attachEvent('onload', onIframeLoad);

            link.onclick = function() {
                iframe.src = this.href;
                return false;
            }
        };
    </script>
</body>
</html>

Solution 2

It seems you can't add a load listener to an iFrame in IE using the DOM property once the page has loaded.

But you can use attachEvent, so:

function on_iframe_load() {
    function foo() {
        alert('Thanks for the visit!');
    };
    var el = document.getElementById('iframe_a');

    if (el.attachEvent) {
      el.attachEvent('onload',foo);
    } else if (el.addEventListener) {
      el.addEventListener('load', 'foo', false);
    }
}

I was testing in IE 6 and reversed the usual test order so that attachEvent is used in preference to addEventListener. You may want to test more recent versions of IE to see if the opposite order works and also test other IE–like browsers such as Opera.

Edit

Modified the code after testing (silly me) to use addEventListener. Here's something that works in IE and others:

function on_iframe_load() {
    function foo() {
        alert('Thanks for the visit!');
    };
    var el = document.getElementById('iframe_a');

    if (el.attachEvent) {
      el.attachEvent('onload',foo);

    } else {
      el.onload = foo;
    }
}

And if you use an onload attribute in the markup, you don't need to add the listener using script.

Solution 3

It works :)

tested on IE8, ff, chrome

var iframe = document.getElementById('iframeid');

    if (iframe .attachEvent) {
      iframe .attachEvent('onload',alert("IE Iframe loaded"));

    } else {
      iframe .onload = alert("Other than IE Iframe loaded");
    }

Solution 4

Just use jquery:

$(iframe).bind( 'load', function(){} );

View more solutions

17,614

Author by

Mori

I'm an English teacher interested in web development.

Updated on June 14, 2022

Comments

Mori almost 2 years

Sample code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function on_iframe_load() {
    document.getElementById('iframe_a').onload = function() {
        alert('Thanks for the visit!');
    };
}
</script>
</head>
<body>
<iframe name="iframe_a" id="iframe_a"></iframe>
<a href="http://www.example.com/" target="iframe_a" onclick="on_iframe_load();">Go!</a>
</body>
</html>

It works in all major browsers with no problem, but IE8 (and probably prior versions) don't understand it.

Update: Just came up with a solution, but I'm not sure if it's right coding. Please review:

<!DOCTYPE html>
<html>

    <head>
        <title></title>
        <script>
            var clicked = false;

            function activate() {
                clicked = true;
            }

            function pop() {
                if (clicked) {
                    alert('Thanks for the visit!');
                };
            }
        </script>
    </head>

    <body>
        <iframe name="iframe_a" onload="pop();"></iframe>
        <a href="http://www.example.com/" target="iframe_a" onclick="activate();">Go!</a>

    </body>

</html>

Mori over 11 years

Thanks for the answer! I updated the question with a solution I just came up with. Would you please review my code and let me know what you think?