iframe使用的时候如何判断是否加载完毕

判断iframe是否加载完毕
最新推荐文章于 2025-07-14 10:30:31 发布
原创 最新推荐文章于 2025-07-14 10:30:31 发布 · 2.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

博客主要围绕判断iframe是否加载完毕展开，虽未给出具体内容，但核心聚焦于该信息技术问题，在前端开发中，准确判断iframe加载状态至关重要。 
 //添加一个加载事件
        var iframe = document.getElementById("oneIframechart");
        if (iframe.attachEvent) {
            iframe.attachEvent("onload", function () {
                document.getElementById("oneIframeLoadA").hidden = true;
            });
        } else {
            iframe.onload = function () {
                document.getElementById("oneIframeLoadA").hidden = true;
            };
        }

这个是oneIframechart 的id
要隐藏的div的oneIframeLoadA id
如下所示：

  '<div id="oneIframeLoadA" style=" margin-top: 28%; margin-left: 49%;"  >....</div>
<iframe id="oneIframechart" name="oneIframechart" class="iframe-div" width="800px" height="618px;" 。。。。>

 

JQuery判断子iframe何时加载完成解决方案
10-26
需要知道iframe何时加载完成，用JQuery很简单就能实现，具体如下，感兴趣的朋友可以参考下，希望对大家有所帮助
判断iframe是否加载完成的完美方法
09-05
当`iframe`的内容完全加载完毕，包括图片、脚本等所有资源，`onload`事件就会触发。在非IE浏览器中，可以像下面这样设置`onload`事件监听器： ```javascript var iframe = document.createElement("iframe"); ...
判断iframe里的页面是否加载完成
09-04
主要介绍了通过js来判断iframe里的页面是否加载完成,需要的朋友可以参考下
iframe使用过程中的记录总结
做好一个小前端
07-14 144
iframe使用过程中的记录总结
判断 iframe 是否加载完毕
恋 无 涯
07-21 1504
方法一、jQuery load() Js代码  //根据id获取iframe var frm = document.getElementById('myiframe');//利用jQuery来判断iframe是否已经加载完毕  $(frm).load(function(){//等iframe加载完毕      //这里就是ifram加载完后做的事情  });   方法二
判断iframe是否加载完成
nick_zhang的博客
11-29 1889
v-loading要加在iframe外面，通过onload事件判断iframe是否加载完成。
JS判断iframe是否加载完成的方法
10-21
当`readyState`属性的值变为"loaded"或"complete"时，表明`iframe`已经加载完毕。以下是一个示例代码： ```html var isIE = /msie/i.test(navigator.userAgent) && !window.opera; var iframe = document....
基于JS判断iframe是否加载成功的方法(多种浏览器）
10-22
当`iframe`内容加载完毕时，`onload`事件会被触发。下面是如何使用`addEventListener`来监听`onload`事件： ```javascript var iframe = document.getElementById('myIframe'); iframe.addEventListener("load", ...
react中 如何判断iframe网页有没有加载完
一个前端工程师
09-08 1833
react中 如何判断iframe网页有没有加载完
判断iframe加载完成
每天一篇文章
07-04 232
网上找了很多代码，总的来说，核心是readyState的状态变化的捕获 iframe如下： [code="java"][/code] javascript： [code="java"] function setVisiblity() { if(document.readTxt.document.readyState=="complete") { var k = d...
iframe判断加载是否完成添加loading或者取消loading效果
weixin_45776308的博客
01-08 1778
2.2 将src置空后会立马又调一次这个加载方法，但是此时iframe的内容为空白，所以判断src是否为空值再进行操作，比如我这个里面是加载完成后将loading效果去除。2.1在来回切换iframe得src时，有的iframe已经加载完成却没进入到加载完成得方法中，解决方法：把src置空后调用此方法，然后把src的赋值写在方法的最后面。1.判断iframe是否加载完成的方法。
iframe 加载完成
zhdd1234的专栏
04-18 729
iframe 加载完成
iframe加载完成
fivestar2009的博客
04-07 2542
<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.
javascript 判断 iframe是否加载成功
chruan的专栏
02-29 2717
IE的每个elem节点都会拥有一个onreadystatechange事件，这个事件每次在elem内容发送变化的时候触发， 比如内容正在载入loading会触发，内容载入完毕loaded会触发，内容载入成功complete会触发， 这个函数还需要配合readyState，这是ie上每个elem都拥有的属性，用来查看每次触发时候的状态。 //先为iframe 添加一个 onreadystate
判断 iframe 是否加载完成的完美方法
多一点点的专栏
07-18 753
般来说，我们判断 iframe 是否加载完成其实与 判断 JavaScript 文件是否加载完成 采用的方法很类似： var iframe = document.createElement("iframe"); iframe.src = "http://www.planabc.net"; if (!/*@cc_on!@*/0) { //if not IE iframe.onl
怎么判断iframe加载完毕
最新发布
09-03
在 Web 开发中，判断 `<iframe>` 是否加载完毕是一个常见的需求，尤其是在你需要对 `iframe` 内容进行操作或通信时（例如调用 `postMessage`、读取内容、调整大小等）。 以下是几种判断 `iframe` 是否加载完成的方法，适用于不同场景。 --- ### ✅ 方法一：使用 `onload` 事件监听（推荐） ```html <iframe id="myIframe" src="https://example.com" onload="iframeLoaded()"></iframe> <script> function iframeLoaded() { console.log('iframe 加载完成'); // 可以在这里安全地操作 iframe 内容 const iframe = document.getElementById('myIframe'); // 注意：如果跨域，contentDocument 会受限 try { const doc = iframe.contentDocument || iframe.contentWindow.document; console.log('iframe 文档内容:', doc.body.innerHTML); } catch (e) { console.warn('跨域限制，无法访问 iframe 内容'); } } </script> ``` #### ✅ 说明： - `onload` 是最直接的判断方式。 - 如果 `iframe` 是同源的，你可以访问其 `contentDocument` 或 `contentWindow.document`。 - 如果是跨域的，则无法访问内容。 --- ### ✅ 方法二：使用 JavaScript 动态绑定 `onload` ```html <iframe id="myIframe" src="https://example.com"></iframe> <script> const iframe = document.getElementById('myIframe'); iframe.onload = function () { console.log('iframe 已加载完成'); }; </script> ``` --- ### ✅ 方法三：使用 `window.addEventListener`（兼容性更好） ```html <iframe id="myIframe" src="https://example.com"></iframe> <script> const iframe = document.getElementById('myIframe'); iframe.addEventListener('load', function () { console.log('iframe 加载完成'); }); </script> ``` --- ### ✅ 方法四：处理 iframe 内容加载后的通信（跨域时） 如果你不能访问 `iframe` 的内容（因为跨域），但对方页面支持 `postMessage`，你可以在 `iframe` 页面加载完成后发送消息通知你。 #### 父页面代码： ```html <iframe id="myIframe" src="https://example.com/child.html"></iframe> <script> const iframe = document.getElementById('myIframe'); iframe.onload = function () { console.log('iframe 加载完成，发送 postMessage'); iframe.contentWindow.postMessage('hello from parent', 'https://example.com'); }; window.addEventListener('message', function (e) { if (e.origin !== 'https://example.com') return; console.log('收到子页面响应:', e.data); }); </script> ``` #### 子页面代码（child.html）： ```html <script> window.addEventListener('message', function (e) { if (e.origin !== 'https://parentdomain.com') return; console.log('收到消息:', e.data); e.source.postMessage('child 页面已加载并收到消息', e.origin); }); </script> ``` --- ### ✅ 方法五：轮询检测 iframe 是否加载完成（备用） 如果你无法使用 `onload`（例如某些旧浏览器或框架限制），可以使用定时器轮询检测 `iframe.contentWindow` 是否存在： ```html <iframe id="myIframe" src="https://example.com"></iframe> <script> const iframe = document.getElementById('myIframe'); const checkIframeLoaded = setInterval(() => { try { if (iframe.contentWindow && iframe.contentWindow.document.readyState === 'complete') { clearInterval(checkIframeLoaded); console.log('iframe 加载完成'); } } catch (e) { // 跨域时无法访问，忽略错误 } }, 100); </script> ``` --- ### ✅ 总结 | 方法 | 适用场景 | 优点 | 注意事项 | |------|----------|------|----------| | `onload` 属性 | 同源或跨域 | 简单直接 | 跨域时不能访问内容 | | `addEventListener('load')` | 同源或跨域 | 更现代 | 跨域限制同上 | | `contentWindow.document.readyState` | 备用检测机制 | 适用于复杂场景 | 需要轮询，性能略差 | | `postMessage` | 需要通信时 | 可以双向通信 | 需双方配合 | ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值