为什么IE8不能处理iframe的onload事件？

Question

为什么IE8不能处理iframe的onload事件？

5

示例代码：

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

- Mori

什么意思？警报消息应该只在单击链接时出现，而不是在初始页面加载时出现。 - Mori

我将您的代码直接放入JSFiddle.net并禁用了库。将IE9设置为IE8模式，您的示例按照您想要的方式工作。这是“示例”代码，而不是真正的问题代码吗？（我知道ie9在ie8模式下不是一个精确的测试） - Mesh

@Adrian：不，这是我在真正的IE8中尝试过的真实代码，而不是在模拟器中。 - Mori

是的，我刚试了一下，如果在真正的IE8中出现“失败”，我可以使用onreadystatechanged事件使其工作... - Mesh

我认为为“click”添加标志不是一个可靠的解决方案。你最好尝试使用JavaScript中不显眼的编码方式（请查看我的编辑答案）。在IE中使用attachEvent，在其他浏览器中使用addEventListener可以解决你的问题。 - Inferpse

4个回答

2

它可以工作 :)

在IE8、火狐和谷歌浏览器上进行了测试

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

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

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

- StackOverFlow

2

只需使用jQuery：

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

- Andris

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 属性，则不需要使用脚本添加侦听器。

- RobG

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Inferpse · Accepted Answer

在IE8中，将inline属性应用于iframe似乎可以解决此问题:

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