有没有办法在 iframe 的内容从父页面完全加载时进行捕获？
捕获 iframe 加载完成事件
IT技术
javascript
html
iframe
load
dhtml
2021-02-07 12:15:31
6个回答
<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) 您也可以在标签内的 element 之后附加事件侦听器<script>，但请记住，在这种情况下，在您添加侦听器时，iframe 可能已经加载。因此它可能不会被调用（例如，如果 iframe 非常非常快，或者来自缓存）。
<iframe id="myframe" src="..."></iframe>
<script>
document.getElementById('myframe').onload = function() {
alert('myframe is loaded');
};
</script>
另请参阅我关于哪些元素也可以触发此类事件的其他答案load
以上答案都不适合我，但是确实如此
更新：
正如@doppleganger 在下面指出的那样，负载从 jQuery 3.0 开始就消失了，所以这里有一个使用on. 请注意，这实际上适用于 jQuery 1.7+，因此即使您尚未使用 jQuery 3.0，也可以通过这种方式实现它。
$('iframe').on('load', function() {
// do stuff
});
在 vanilla 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');
请注意，如果 iframe 在屏幕外加载，则 onload 事件似乎不会触发。使用“在新窗口中打开”/w 选项卡时经常发生这种情况。
您还可以通过这种方式捕获 jquery 就绪事件：
$('#iframeid').ready(function () {
//Everything you need.
});
这是一个工作示例：