等待 iframe 在 JavaScript 中加载

问题描述 投票：0回答：5

我正在 JavaScript 中打开一个 iframe：

righttop.location = "timesheet_notes.php";

然后想要传递信息给它：

righttop.document.notesform.ID_client.value = Client;

显然，直到页面完全加载到 iframe 中之后，该行才会起作用，并且该表单元素将被写入。

那么，解决这个问题最好/最有效的方法是什么？某种超时循环？理想情况下，我真的希望将其全部包含在这个特定的脚本中，而不是必须向正在打开的页面添加任何额外的内容。

javascript dom iframe dom-events
5个回答
98
投票

首先，我相信你应该影响 iframe 的 

src
属性，而不是 
location
。其次，挂钩 iframe 的 
load
事件来执行更改：

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

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

7
投票

我想你可以很容易地用 jQuery 做到这一点...jQuery Home 只需将页面挂接到 jQuery 

$ function ()
...例如

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

快速浏览一下这里的文件上传器示例： 使用 iframe 进行多个文件上传...

2
投票

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

 $('iframe').ready(function() {
   var triggerMeAgainIfNeeded = function() {
      setTimeout(function() {
          var neededElm = $('.someElementThatLoadedAfterIframe');
           if (neededElm.length > 0) {
             // do your job
           } else {
             triggerMeAgainIfNeeded();
           }
       }, 10);
   }
});
0
投票

试试这个...

$('iframe').each(function() { 
    $(this).ready(function() {
        $('#result').html("ready");
    });
});
0
投票

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

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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.