乐闻世界logo
搜索文章和话题

如何在 javascript 中等待 iframe 加载进度？

JavaScript前端
9 个月前提问
5 个月前修改
浏览次数125次

5个答案

1
2
3
4
5

在 JavaScript 中等待 iframe 内容加载完成，一般有几种常用的方法，分别是使用 load 事件、DOMContentLoaded 事件和轮询 document.readyState 属性。以下是对这些方法的详细解释和示例：

使用 load 事件

load 事件在 iframe 的所有内容（包括图像、脚本文件等）加载完成后触发。监听 iframe 的 load 事件是最简单直接的方法：

javascript
var iframe = document.getElementById('myIframe');
iframe.onload = function() {
    console.log('Iframe 完全加载完成');
    // 在这里执行其他操作
};

或者使用 addEventListener 方法：

javascript
var iframe = document.getElementById('myIframe');
iframe.addEventListener('load', function() {
    console.log('Iframe 完全加载完成');
    // 在这里执行其他操作
});

使用 DOMContentLoaded 事件

如果你只关心 iframe 的文档内容（不包括像图片这样的资源），可以使用 DOMContentLoaded 事件。这个事件在文档被完全加载和解析后立即触发，不需要等待样式表、图片和子框架的加载完成。

javascript
var iframe = document.getElementById('myIframe');
iframe.addEventListener('load', function() {
    var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
    iframeDocument.addEventListener('DOMContentLoaded', function() {
        console.log('Iframe 的 DOM 内容加载完成');
        // 在这里执行其他操作
    });
});

轮询 document.readyState

如果上述事件不适用于你的特定情况（例如，你无法保证能够在 DOMContentLoaded 触发之前设置事件监听器），你还可以通过轮询检查 iframe 的 document.readyState 属性：

javascript
var iframe = document.getElementById('myIframe');
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

function checkIframeLoaded() {
    // 检查 iframe 的 document 是否加载完成
    if (iframeDocument.readyState === 'complete' || iframeDocument.readyState === 'interactive') {
        console.log('Iframe 内容加载完成');
        // 在这里执行其他操作
    } else {
        // 如果没有加载完成，再次检查
        setTimeout(checkIframeLoaded, 100);
    }
}

checkIframeLoaded();

总结

根据您的具体需求，可以选择监听 load 事件来等待所有资源加载完毕，或者使用 DOMContentLoaded 事件等待 DOM 内容渲染完毕，或者不断轮询 document.readyState 属性来确定加载状态。在实际应用中，您可以根据 iframe 中内容的具体情况和您希望执行操作的时机来选择最合适的方法。

2024年6月29日 12:07 回复

首先，我相信你应该影响srciframe 的属性，而不是location. 其次，挂钩 iframe 的load事件来执行更改：

shell
var myIframe = document.getElementById('righttop');
myIframe.addEventListener("load", function() {
  this.contentWindow.document.notesform.ID_client.value = Client;
});
myIframe.src = 'timesheet_notes.php';

再次强调，这一切都假设您指的是i框架，而不是框架集。

2024年6月29日 12:07 回复

我想你可以很容易地用 jQuery 来做到这一点... jQuery Home 只需将页面挂接到 jQuery $ function ()... 例如

shell
$(document).ready(function() { 
    $('iframe').load(function() { 
       // write your code here....
    });
});

快速查看此处的文件上传器示例： Using iframes for multiple file uploads...

2024年6月29日 12:07 回复

iFrame 可以动态加载元素，使用它们的最佳选择是使用递归：

shell
 $('iframe').ready(function() {
   var triggerMeAgainIfNeeded = function() {
      setTimeout(function() {
          var neededElm = $('.someElementThatLoadedAfterIframe');
           if (neededElm.length > 0) {
             // do your job
           } else {
             triggerMeAgainIfNeeded();
           }
       }, 10);
   }
});
2024年6月29日 12:07 回复

尝试这个简单的解决方案：

shell
const myIframe = document.querySelector('iframe[name="my-iframe"]');
const waitForMyIframeToReload = () => (new Promise(resolve => myIframe.addEventListener('load', () => resolve())));
myIframe.contentWindow.location.reload(true);
await waitForSdiIframeToReload();
console.log('I executed after the iframe loaded'));

<html>
  <body style="height: 100%; width: 100%;">
    <iframe name="my-iframe" src="https://platform.twitter.com/widgets/tweet_button.html" style="height: 100%; width: 100%;"></iframe>
  </body>
</html>

运行代码片段Hide results

展开片段

2024年6月29日 12:07 回复

你的答案