捕获 iframe 加载完成事件

Posted 2023-02-16

【中文标题】捕获 iframe 加载完成事件

【英文标题】：Capture iframe load complete event

【发布时间】：2011-03-09 17:47:57

【问题描述】：

有没有办法在 iframe 的内容从父页面完全加载时捕获？

【问题讨论】：

Reading Iframe Content in Iframe Load 的可能重复项

【参考方案1】：

<iframe> 元素有一个 load 事件。

---

如何收听该事件取决于您，但通常最好的方式是：

1) 以编程方式创建您的 iframe

它确保您的load 侦听器始终通过在iframe 开始加载之前被调用。

<script>
var iframe = document.createElement('iframe');
iframe.onload = function()  alert('myframe is loaded'); ; // before setting 'src'
iframe.src = '...'; 
document.body.appendChild(iframe); // add it to wherever you need it in the document
</script>

---

2) 内联 javascript，是您可以在 html 标记中使用的另一种方式。

<script>
function onMyFrameLoad() 
  alert('myframe is loaded');
;
</script>

<iframe id="myframe" src="..." onload="onMyFrameLoad(this)"></iframe>

---

3) 您也可以将事件侦听器 附加在元素之后，在 <script> 标记内，但请记住，在这种情况下，iframe 已经加载的可能性很小当你开始添加你的听众时。因此，它可能不会被调用（例如，如果 iframe 非常非常快，或者来自缓存）。

<iframe id="myframe" src="..."></iframe>

<script>
document.getElementById('myframe').onload = function() 
  alert('myframe is loaded');
;
</script>

---

另见我关于which elements can also fire this type of load event的其他回答

【讨论】：

谢谢，这正是我所需要的！

使用此方法，您只能在加载 iframe 时运行单个函数。请参阅使用 addEventListener 的 my answer below，它允许在加载事件上运行多个回调。

这种方法也容易受到race condition 的攻击，因为 iframe 可能会在脚本标记执行之前加载。

当您尝试下载文件时，加载事件不起作用。

是的，如果 iFrame 内容不是 HTML，则在 IE 中不起作用，例如PDF格式。看到这个：connect.microsoft.com/IE/feedback/details/809377/…

【参考方案2】：

以上答案都不适合我，但确实如此

更新：

正如@doppleganger 下面指出的，从 jQuery 3.0 开始，负载就消失了，所以这里有一个使用 on 的更新版本。请注意，这实际上适用于 jQuery 1.7+，因此即使您还没有使用 jQuery 3.0，您也可以通过这种方式实现它。

$('iframe').on('load', function() 
    // do stuff 
);

【讨论】：

从 jQuery 3.0 开始，load 消失了。请改用.on('load', function() ... )。

如果您使用jquery 或jqLite，那么这就是要走的路！

【参考方案3】：

在原生 javascript 中还有另一种一致的方式 (only for IE9+)：

const iframe = document.getElementById('iframe');
const handleLoad = () => console.log('loaded');

iframe.addEventListener('load', handleLoad, true)

如果您对Observables 感兴趣，那么可以：

import  fromEvent  from 'rxjs';

const iframe = document.getElementById('iframe');

fromEvent(iframe, 'load').subscribe(() => console.log('loaded');

【讨论】：

在我看到 iFrame 渲染之前，我的调试器在handleLoad() 的断点处停止是否值得关注？我希望这纯粹是一个渲染问题，而不是内容加载问题。

当 iframe 已经存在时，如何通过 jquery 捕获该事件...即：iframe 不是由 jquery 创建的。

【参考方案4】：

请注意，如果 iframe 在屏幕外加载时似乎不会触发 onload 事件。这在使用“在新窗口中打开”/w 选项卡时经常发生。

【讨论】：

还有 iframe，不显示 ;)

我有一个 iframe，它是 display: none 但在向其发布表单后会触发 onload 事件。

【参考方案5】：

您也可以通过这种方式捕获 jquery 就绪事件：

$('#iframeid').ready(function () 
//Everything you need.
);

这是一个工作示例：

http://jsfiddle.net/ZrFzF/

【讨论】：

我不认为代码做你认为它做的事情。您可以用任何东西替换小提琴中的“#iFrame”选择器，警报仍然会触发

除了@roryok，当 DOM 准备好时触发 ready，而不是整个页面加载。

ready 在 DOM 准备好并且可以执行 js 时触发，而不是在加载内容时触发。

$("#iframeid").ready 当元素在dom中时触发该函数。不是在 iram 完成加载时。

它只调用了一次 :(

【参考方案6】：

第一步：在模板中添加iframe。

<iframe id="uvIFrame" src="www.google.com"></iframe>

第 2 步： 在 Controller 中添加负载监听器。

document.querySelector('iframe#uvIFrame').addEventListener('load', function () 
  $scope.loading = false;
  $scope.$apply();
);