JQuery - 等待两个 iframe 加载答案

【问题标题】：JQuery - Wait for two iframes to loadJQuery - 等待两个 iframe 加载
【发布时间】：2026-01-31 10:45:01
【问题描述】：

我有一个按钮，可以在两个 iframe 中加载两个不同的页面。我需要等待这些加载完成（比如 ready()，不关心图像和其他内容），然后触发另一个动作。我该怎么做？

【问题讨论】：

这是 AJAX 负载吗？如果是，那么您使用什么 AJAX 库？
不，不是 AJAX。一个是 form.submit() 另一个我只是设置 iframe 的 src 属性。

【解决方案1】：

一种方法是让 iFrame 内容发出信号表明它已准备就绪。这是一种简单的方法：

主页

var status = [false, false];

function doneLoading(index)
{
   status[index] = true;
   if (status[1] && status[2])
      alert("Both iframes are done loading");
}

在每个 iFrame 中

$(document).ready(function() { parent.doneLoading(1) }); // or 2

【讨论】：

很遗憾，我不拥有 iframe 中正在加载的页面。
您可以使用相同的方法。只需将 onload 事件处理程序附加到每个 iframe。 $("#iframe1").load(function() { doneLoading(1) });
您将 [0] 和 [1] 设置为 false，然后使用 [1] 和 [2]。这是 JS 所以 [2] == false 反正。有缺陷的代码，没有等待/回调机制。

【解决方案2】：

使用$.when() 将帮助您（jQuery 1.5 及更高版本）。例如：

function doAjax(){
   return $.get('foo.htm');
}

function doMoreAjax(){
   return $.get('bar.htm');
}

$.when( doAjax(), doMoreAjax() )
   .then(function(){
      console.log( 'I fire once BOTH ajax requests have completed!' );
   })
   .fail(function(){
      console.log( 'I fire if one or more requests failed.' );
   });

【讨论】：

他指定不是 AJAX
Nice catch (y) 但是在我发布这个答案后 15 分钟后添加了关于它不是 ajax 的说明......一年前

【解决方案3】：

在我看来，最安全的解决方案可能是拥有一个嵌入两个 iframe 并等待整个页面（父页面）加载的父 iframe：

$(parent).load(function(){
   ... //if you get there then the 2 iframes are already loaded
}

缺点是 iframe 很多

【讨论】：