捕获iframe加载完成事件

Question

有没有办法捕获iframe的内容是否已从父页面完全加载？

Answer 1

<iframe>个元素有 load事件。

---

你如何倾听这一事件取决于你，但通常最好的方法是：

1）以编程方式创建iframe

在iframe开始加载之前，确保始终通过附加来调用load侦听器。

<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

的其他答案

Answer 2

上述任何一个答案都不适用于我，但是这样做了

<强>更新：

正如@doppleganger在下面指出的那样，从jQuery 3.0开始，加载就消失了，所以这里是使用on的更新版本。请注意，这实际上可以在jQuery 1.7+上运行，因此即使你还没有使用jQuery 3.0，你也可以通过这种方式实现它。

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

Answer 3

在vanilla JavaScript中有另一种一致的方法（only for IE9+）：

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

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

如果你对Observables感兴趣，可以解决这个问题：

return Observable.fromEventPattern(
  handler => iframe.addEventListener('load', handler, true),
  handler => iframe.removeEventListener('load', handler)
);

Answer 4

您还可以通过以下方式捕获jquery ready事件：

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

这是一个有效的例子：

http://jsfiddle.net/ZrFzF/

Answer 5

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

Answer 6

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

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

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

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