iframe加载完成

最新推荐文章于 2024-06-18 17:16:23 发布

fivestar2009

最新推荐文章于 2024-06-18 17:16:23 发布

阅读量2.4k

点赞数

分类专栏： html 文章标签： http

原文链接：https://humanwhocodes.com/blog/2009/09/15/iframes-onload-and-documentdomain/

版权

html 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

<html>
<head>
    <title>IFrame onload Example (Outer)</title>
</head>
<body>
    <h1>Iframe onload Example</h1>
    <p>This example dynamically creates an iframe and assigns a function to its <code>window</code> object's <code>onload</code> event handler.
    This works in all browsers so long as the iframe just loads a local resource. There's a JavaScript error when you attempt this for foreign resources.</p>
    <p><button οnclick="loadLocalIframe()">Load local iframe</button><button οnclick="loadForeignIframe()">Load foreign iframe</button></p>
    <script type="text/javascript">
    
        function loadLocalIframe(){
            var iframe = document.createElement("iframe"),
                iframeWindow;
            iframe.src = "simpleinner.htm";
            document.body.appendChild(iframe);
            iframeWindow = iframe.contentWindow || iframe.contentDocument.parentWindow;
            iframeWindow.onload = function(){
                alert("Local iframe is now loaded.");
            };
        }

        function loadForeignIframe(){
            var iframe = document.createElement("iframe");
            iframe.src = "http://search.yahoo.com/";
            document.body.appendChild(iframe);
            iframeWindow = iframe.contentWindow || iframe.contentDocument.parentWindow;
            iframeWindow.onload = function(){
                alert("Foreign iframe is now loaded.");
            };
        }
    
    </script>
    <p>Back to the <a href="{{site.url}}/blog/2009/09/15/iframes-onload-and-documentdomain">blog post</a></p>

</body>
</html>

很老的东西，记下来下，万一以后要用到

一般来说，我们判断 iframe 是否加载完成其实与判断 JavaScript 文件是否加载完成采用的方法很类似：

var iframe = document.createElement("iframe");
iframe.src = "http://www.planabc.net";
 
if (!/*@cc_on!@*/0) { //if not IE
    iframe.onload = function(){
        alert("Local iframe is now loaded.");
    };
} else {
    iframe.onreadystatechange = function(){
        if (iframe.readyState == "complete"){
            alert("Local iframe is now loaded.");
        }
    };
}
 
document.body.appendChild(iframe);

最近， Nicholas C. Zakas 文章《Iframes, onload, and document.domain》的评论中 Christopher 提供了一个新的判断方法（很完美）：

var iframe = document.createElement("iframe");
iframe.src = "http://www.planabc.net";
 
if (iframe.attachEvent){
    iframe.attachEvent("onload", function(){
        alert("Local iframe is now loaded.");
    });
} else {
    iframe.onload = function(){
        alert("Local iframe is now loaded.");
    };
}
 
document.body.appendChild(iframe);

几点补充说明：

IE 支持 iframe 的 onload 事件，不过是隐形的，需要通过 attachEvent 来注册。
第二种方法比第一种方法更完美，因为 readystatechange 事件相对于 load 事件有一些潜在的问题。

转载：

https://www.cnblogs.com/fanjuncheng666/p/9634571.html?ivk_sa=1024320u

Iframes, onload, and document.domain - Human Who Codes

fivestar2009

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
iframe加载完成

<html><head> <title>IFrame onload Example (Outer)</title></head><body> <h1>Iframe onload Example</h1> <p>This example dynamically creates an iframe and assigns a function to its <code.
复制链接

扫一扫