【转】Firefox下iframe的onload事件有可能无法触发 作者:zhanglili

Firefox下,已经load的document,重新open再write一个iframe,则这个iframe的onload不会执行。

重现步骤

  1. 在页面中放置一个iframe,并注册一个onload处理函数。
  2. 在该处理函数中,打开iframe的文档流。
  3. 向文档流使用document.write写入一个iframe,这个iframe包含一个onload属性。
  4. 查看onload的处理函数是否执行。

期望结果

iframe的onload处理函数正确执行。

实际结果

第二层iframe的onload函数没有执行。

影响范围

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>我去你喵的</title>
</head>
<body>
    <script>
        var loaded = false;
        function load(iframe) {
            if (!loaded) {
                loaded = true;
                var doc = iframe.contentWindow.document;
                doc.open();
                doc.write('<iframe src="about:blank" onload="alert(\'!!\');"><\/iframe>');
                doc.write('</body>');
                doc.close();
            }
        }
    </script>
    <iframe src="about:blank" onload="load(this);"></iframe>
</body>
</html>

解决方案

需要向iframe的文档流写入数据的情况,通常出现在使用一个src为about:blank的iframe元素占位的情况下,因此外层iframe的onload事件没有太大意义。

可以在iframe元素之后内联一段脚本以达到写入iframe的文档流的目的,通过document.getElementsByTagName('iframe')的最后一个获取该iframe元素。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>我去你喵的</title>
</head>
<body>
    <iframe src="about:blank"></iframe>
    <!-- 以下代替onload -->
    <script>
        var frames = document.getElementsByTagName('iframe');
        var iframe = frames[frames.length - 1];
        var doc = iframe.contentWindow.document;
        doc.open();
        doc.write('<iframe src="about:blank" onload="alert(\'!!\');"><\/iframe>');
        doc.write('</body>');
        doc.close();
    </script>
</body>
</html>

你可能感兴趣的:(html,脚本,firefox)