为什么 IE8 不处理 iframe onload 事件？答案

【问题标题】：Why doesn't IE8 handle iframe onload events?为什么 IE8 不处理 iframe onload 事件？
【发布时间】：2013-11-06 19:58:00
【问题描述】：

示例代码：

<!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>

它可以在所有主流浏览器中正常运行，但 IE8（可能还有以前的版本）不理解它。

更新：刚刚想出了一个解决方案，但我不确定它是否是正确的编码。请查看：

<!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>

【问题讨论】：

什么意思？只有在您单击链接时才会出现警报消息，而不是在初始页面加载时出现。
我将您的代码直接放入 JSFiddle.net 禁用了这些库。将 IE9 设置为在 IE8 模式下工作，您的示例将按您的意愿工作。这个“示例”代码与实际问题代码相反吗？（我知道 ie8 模式下的 ie9 不是精确测试）
@Adrian：不，这是我在真正的 IE8 中尝试过的真正代码，而不是在模拟器中。
是的，刚刚试过，如果在真正的 ie8 中“失败”，我可以使用 onreadystatechanged 事件让它工作......
我不认为为“点击”添加标志是一个可靠的解决方案。您最好尝试使用 javascript 进行不显眼的编码方式（查看我编辑的答案）。 IE 使用attachEvent，其他浏览器使用addEventListener 可以解决您的问题。

标签： javascript html iframe internet-explorer-8

【解决方案1】：

在 iframe 上使用内联属性似乎可以解决 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>

按要求更新：

您应该尝试编写更不显眼的 javascript。以这种方式编写代码可能会防止您在 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>

【讨论】：

感谢您的回答！我用我刚刚提出的解决方案更新了这个问题。请您查看我的代码并告诉我您的想法吗？

【解决方案2】：

页面加载后，您似乎无法使用 DOM 属性向 IE 中的 iFrame 添加负载侦听器。

但是你可以使用attachEvent，所以：

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);
    }
}

我在 IE 6 中进行测试并颠倒了通常的测试顺序，因此attachEvent 优先于addEventListener 使用。您可能想测试更新的 IE 版本，看看相反的顺序是否有效，并测试其他类似 IE 的浏览器，例如 Opera。

编辑

在测试后修改了代码（我傻了）以使用addEventListener。以下是适用于 IE 和其他系统的内容：

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;
    }
}

如果在标记中使用 onload 属性，则无需使用脚本添加监听器。

【讨论】：

【解决方案3】：

它有效:)

在 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");
    }

【讨论】：

【解决方案4】：

只需使用 jquery：

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

【讨论】：