等待 iframe 在 JavaScript 中加载

IT技术 javascript dom iframe dom-events
2021-02-23 09:07:00

我正在用 JavaScript 打开一个 iframe:

righttop.location = "timesheet_notes.php";

然后想向它传递信息:

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

显然,在页面完全加载到 iframe 之前,该行不会工作,并且该表单元素将被写入。

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

4个回答

首先,我相信您应该影响srciframe属性,而不是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 属性意外地破坏它们。
2021-05-01 09:07:00
@Bill:不,@Eric 的问题是这个答案是否会干扰元素本身onload="..."设置的任何属性<iframe>答案是肯定的,它会的。然而任何onload处理组的iframe文档不受影响。
2021-05-02 09:07:00
@埃里克:是的。使用像 Mootools、Prototype 1.6 或 jQuery 这样的库。如果您没有其中之一,请使用:ejohn.org/blog/flexible-javascript-events
2021-05-15 09:07:00
啊...这是否意味着触发页面加载的脚本中的这个onload函数可能会干扰已加载页面中的onload函数?我想只要他们不是都试图向/从同一个元素写入就可以了?
2021-05-19 09:07:00
奇怪的是,我可以让它作为 <iframe onload=""> 工作,但不能与 iframe.onload = function(){} 一起工作。
2021-05-20 09:07:00

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

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

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

我并不是真的想进入 jquery(还没有打开那扇门),我只是希望用几行优雅的 javascript 来处理它。但无论如何感谢拉杰什!
2021-04-21 09:07:00
不是问题..感谢您的发布,因为我必须在不使用 jquery 的情况下学习一些技巧:)
2021-05-01 09:07:00

试试这个...

$('iframe').each(function() { 
    $(this).ready(function() {
        $('#result').html("ready");
    });
});
原始海报从未提及 jQuery,也没有在帖子中使用 jQuery 标签。我建议他们不要在寻找 jQuery 答案。
2021-05-01 09:07:00

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

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