捕获 iframe 加载完成事件

Question

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

Answer 1

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

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

这是一个工作示例：

http://jsfiddle.net/ZrFzF/< /a>

Answer 2

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

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

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

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

Answer 3

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

Answer 4

在普通 JavaScript 中还有另一种一致的方法（仅适用于 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'));

Answer 5

上面的答案都不适合我，但是这确实

更新：

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

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

Answer 6

元素有一个 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) 您还可以在

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

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

---

另请参阅我的其他答案，了解 哪些元素也可以触发此类 加载事件