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

最新推荐文章于 2024-01-08 14:37:21 发布

iteye_11097

最新推荐文章于 2024-01-08 14:37:21 发布

阅读量693

点赞数

分类专栏：前端技术文章标签： Firefox HTML 脚本

本文链接：https://blog.csdn.net/iteye_11097/article/details/82070511

版权

前端技术专栏收录该内容

52 篇文章 0 订阅

订阅专栏

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

重现步骤

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

期望结果

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

实际结果

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

影响范围

Firefox 4.0

示例代码

<!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" οnlοad="alert(\'!!\');"><\/iframe>');
                doc.write('</body>');
                doc.close();
            }
        }
    </script>
    <iframe src="about:blank" οnlοad="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" οnlοad="alert(\'!!\');"><\/iframe>');
        doc.write('</body>');
        doc.close();
    </script>
</body>
</html>

iteye_11097

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【转】Firefox下iframe的onload事件有可能无法触发作者：zhanglili

Firefox下，已经load的document，重新open再write一个iframe，则这个iframe的onload不会执行。重现步骤在页面中放置一个iframe，并注册一个onload处理函数。在该处理函数中，打开iframe的文档流。向文档流使用document.write写入一个iframe，这个iframe包含一个onload属性。查看onload的处理...
复制链接

扫一扫