iframe 加载完毕前的等待特效

<div align="center" id="loading"><img  style=" margin-top:100px;floa: left;height: 20px;width: 20px;" src="http://img.zcool.cn/community/0179f1574d2d656ac72525ae5f181d.gif" />
    加载中,请稍后...
</div>
<iframe id="zgboke" onreadystatechange=stateChangeIE(this) onload=stateChangeFirefox(this) style="visibility: hidden;padding: 0px; width: 100%; height="0" src="http://www.wpsseo.cn/" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
<script language="javascript">
 function stateChangeIE(_frame)
    {
       if (_frame.readyState=="interactive")
     {
          var loader = document.getElementById("loading");
          loader.innerHTML      = "";
          loader.style.display = "none";
          _frame.style.visibility = "visible";
         }
 }
    function stateChangeFirefox(_frame)
      {
          var loader = document.getElementById("loading");
          var f= document.getElementById("zgboke");
          f.height="512";
          loader.innerHTML      = "";
          loader.style.display = "none";
          _frame.style.visibility = "visible";
 }
</script>

在这里插入图片描述

在 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` | 需要通信时 | 可以双向通信 | 需双方配合 | ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值