iframe的onload事件监听

最新推荐文章于 2024-03-12 15:10:28 发布

转载最新推荐文章于 2024-03-12 15:10:28 发布 · 3.2k 阅读

文章标签：

#iframe #function #html #button #div #input

jquery 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种通用的iframe onload事件监听方法，适用于不同浏览器。通过JavaScript动态创建和操作iframe，实现了加载完成后的回调功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做打印的时候用到了iframe，监听了一个onload事件，结果这位事件同志直接把我要调用的方法声明到了父界面当中去了，更要命的是我要弹的打印界面是一个大窗体界面，他的父界面是我们整个系统的主界面，当时我就吐血了，所以只好利用js中来给他添加onload监听，下面这个方法我暂时没有没有去试，先转载，明天试：

iframe的onload事件监听比较麻烦，浏览器注册事件监听的方式也不一样，下面是一个通用的监听方式。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
        <title></title>
</head>
<body>
<div id="cnt"></div>
<input name="bt" type="button" value="设置IFrame内容"
</body>
</html>
<script type='text/javascript'>
        //添加两个
        function doAction1() {
                alert("
        }
        function doAction2() {
                alert("
        }

        function doIt() {

                //删除所有的ifream内容
                var div = document.getElementById("cnt");
                var arrifm = div.getElementsByTagName("iframe");
                if (arrifm.length != 0) {
                        var x = div.removeChild(arrifm[0]);
                        alert("清除成功！")
                }

                //添加新的ifream内容
                var iframe = document.createElement("iframe");
                iframe.src = "b.html";

                //为ifream的
                if (iframe.attachEvent) {
                        iframe.attachEvent(" {
                                doAction1();
                                alert("Local iframe is now loaded 1.");
                        });
                } else {
                        iframe.onload = function() {
                                this.doAction2();
                                alert("Local iframe is now loaded 2.");
                        }
                }

                //追加ifream元素
                div.appendChild(iframe);
                //弹出ifream的HTML代码
//                alert(div.innerHTML);
        }
</script>

上面的事件监听写成下面的也行：

~~但是下面这种方式不行：~~

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
        <title></title>
</head>
<body>
<div id="cnt"></div>
<input name="bt" type="button" value="设置IFrame内容" onclick="doIt()">
</body>
</html>
<script type='text/javascript'>
        function aa() {
                alert("aaaaaaaaa");
        }
        function doIt() {

                //删除所有的ifream内容
                var div = document.getElementById("cnt");
                var arrifm = div.getElementsByTagName("iframe");
                if (arrifm.length != 0) {
                        var x = div.removeChild(arrifm[0]);
                        alert("清除成功！")
                }

                //添加新的ifream内容
                var iframe = document.createElement("iframe");
                iframe.src = "b.html";

                //添加两个
                doIt.prototype.doAction1 = function() {
                        alert("onload1");
                        bb();
                };
                doIt.prototype.doAction2 = function() {
                        alert("onload2");
                        bb();
                };

                // 下面的方式不行
                if (iframe.attachEvent) {
                        iframe.attachEvent("onload", this.doAction1());
                } else {
                        iframe.onload = this.doAction2();
                }

                // 下面的方式不行
//                if (iframe.addEventListener) {
//                        iframe.addEventListener(' this.doAction1, false);
//                } else if (iframe.attachEvent) {
//                        iframe.onload = this.doAction2;
//                }

                //追加ifream元素
                div.appendChild(iframe);
                //弹出ifream的HTML代码
                alert(div.innerHTML);
        }

</script>

注意：父窗口不能调用ifream内的js方法。

原文： http://lavasoft.blog.51cto.com/62575/481054