等待 iframe 在 JavaScript 中加载答案

【问题标题】：Wait for iframe to load in JavaScript等待 iframe 在 JavaScript 中加载
【发布时间】：2010-11-30 14:51:11
【问题描述】：

我正在用 JavaScript 打开一个 iframe：

righttop.location = "timesheet_notes.php";

然后想给它传递信息：

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

很明显，在页面完全加载到 iframe 中并且该表单元素可以写入之前，该行不会起作用。

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

【问题讨论】：

标签： javascript dom iframe dom-events

【解决方案1】：

首先，我相信你应该影响iframes的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框架，而不是框架集。

【讨论】：

有没有办法通过附加事件来做到这一点？假设 iframe 可能有它自己的 onload 处理程序，我不想通过重新分配 onload 属性来意外破坏它们。
@Eric：是的。使用 Mootools、Prototype 1.6 或 jQuery 等库。如果您没有其中之一，请使用：ejohn.org/blog/flexible-javascript-events
啊...这是否意味着触发页面加载的脚本中的这个onload函数可能会干扰已加载页面中的onload函数？我想只要他们不是都试图写入/从同一个元素写入就可以了吗？
@Bill：不，@Eric 的问题是关于这个答案是否会干扰在<iframe> 元素本身上设置的任何onload="..." 属性。答案是肯定的，它会的。但是任何onload 处理程序设置在 iframe 文档不受影响。
奇怪的是，我可以让它作为但不能使用 iframe.onload = function(){}。

【解决方案2】：

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

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

在这里快速查看文件上传器示例： Using iframes for multiple file uploads...

【讨论】：

我真的不想进入 jquery（还没有打开那扇门），我希望只是用几行优雅的 javascript 来处理它。不过还是谢谢拉杰什！
不是问题.. 感谢您的发帖，因为我必须在不使用 jquery 的情况下学习一些技巧 :)

【解决方案3】：

试试这个...

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

【讨论】：

原始发帖人从未提及 jQuery，也没有在帖子中获得 jQuery 标签。我建议他们不要在寻找 jQuery 答案。

【解决方案4】：

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

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

【讨论】：