【发布时间】：2011-03-09 17:47:57
【问题描述】：
有没有办法在 iframe 的内容从父页面完全加载时捕获？
【问题讨论】：
标签： javascript html iframe load dhtml
【发布时间】：2011-03-09 17:47:57
【问题描述】：
<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/…
以上答案都不适合我，但确实如此
更新：
正如@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，那么这就是要走的路！
在原生 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 创建的。
请注意，如果 iframe 在屏幕外加载时似乎不会触发 onload 事件。这在使用“在新窗口中打开”/w 选项卡时经常发生。
【讨论】：
-
还有 iframe，不显示 ;)
-
我有一个 iframe，它是 display: none 但在向其发布表单后会触发 onload 事件。
您也可以通过这种方式捕获 jquery 就绪事件：
$('#iframeid').ready(function () {
//Everything you need.
});
这是一个工作示例：
【讨论】：
-
我不认为代码做你认为它做的事情。您可以用任何东西替换小提琴中的“#iFrame”选择器，警报仍然会触发
-
除了@roryok，当 DOM 准备好时触发 ready，而不是整个页面加载。
-
ready 在 DOM 准备好并且可以执行 js 时触发，而不是在加载内容时触发。
-
$("#iframeid").ready 当元素在dom中时触发该函数。不是在 iram 完成加载时。
-
它只调用了一次 :(
第一步：在模板中添加iframe。
<iframe id="uvIFrame" src="www.google.com"></iframe>
第 2 步： 在 Controller 中添加负载监听器。
document.querySelector('iframe#uvIFrame').addEventListener('load', function () {
$scope.loading = false;
$scope.$apply();
});
【讨论】：