如何设置在加载所有动态添加的 iframe 时触发的 window.onload 事件？
Posted
技术标签:
【中文标题】如何设置在加载所有动态添加的 iframe 时触发的 window.onload 事件？【英文标题】：How can you set a window.onload event that fires when all dynamically added iframes are loaded? 【发布时间】：2015-02-19 09:55:38 【问题描述】：我想设置一个window.onload 事件。我想将iframes 动态添加到页面。每次加载 iframe 时，我都希望 window.onload 触发。我该怎么做？
编辑：假设我添加了第 5 个iframe。只有当iframes 1、2、3、4 和 5 都已加载时，我才想运行一个函数。我不能只为每个iframe 添加处理程序，因为如果iframe 5 在iframe 2 之前完成加载怎么办？
以下操作无效：
http://codepen.io/anon/pen/emzbZj?editors=101
HTML
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<button>add</button>
<iframe src="http://www.w3schools.com"></iframe>
</body>
</html>
JavaScript
$(document).ready(function()
$('button').on('click', function()
$('<iframe src="http://www.w3schools.com"></iframe>').insertAfter('button');
);
$(window).on('load', function()
console.log('loaded'); // doesn't fire when dynamically added iframes load
);
);
【问题讨论】：
iframe 有它自己的window，你想要那个加载事件。 $('iframe').on('load...'
【参考方案1】：
给你，我希望这个小提琴能像你期望的那样工作
http://jsfiddle.net/sahilbatla/4wbpbjbo/
$(document).ready(function()
$('button').on('click', function()
$('<iframe src="http://www.w3schools.com"></iframe>').on('load',function()
alert('loaded')
).insertAfter('button');
);
);
【讨论】：
查看我对其他答案的评论。我会更新问题来解释。 我可能错了，但该代码不会等待加载时间更长的帧，对吗？ 它现在会默默地失败，如果你想在前四个完成加载后加载 5，只需在 loadEvent 处理程序中的 if 语句的 else 部分添加一个 setTimeout，如果这就是你需要的. - jsfiddle.net/sahilbatla/4wbpbjbo/4【参考方案2】：您需要挂钩 iframe 的加载事件。 这应该有效：
function loaded()
console.log('loaded');
$('button').on('click', function()
var iframe = $('<iframe src="http://www.w3schools.com"></iframe>');
iframe.insertAfter('button');
iframe.load(function()
loaded();
);
);
$(window).on('load', function()
loaded();
);
更新：
如果您想等待其他帧首先加载（根据您的编辑），您可以这样做：
var queue = [];
function loaded()
console.log(queue);
console.log("Loaded");
function updateQueue()
var frameNo = $("iframe").length;
queue.push(frameNo);
processLoadEvent(frameNo);
function processLoadEvent(frameNo)
if (queue.length === frameNo)
loaded();
else
setTimeout(function() processLoadEvent(frameNo); , 500);
$('button').on('click', function()
var iframe = $('<iframe src="http://www.w3schools.com"></iframe>');
iframe.insertAfter('button');
iframe.load(function()
updateQueue();
);
);
// Your initial iframe
$("iframe").on("load", updateQueue);
这是demo。
【讨论】：
如何检查页面上的所有iframes 是否已加载？
我不确定我是否遵循。上面的代码将为每个动态插入的 iframe 执行 loaded() 函数中的任何内容。您无法真正“检查” iframe 是否已加载，但是您可以在加载后执行一些代码。
假设我添加了第五个iframe。只有当iframes 1,2,3,4 和 5 都被加载时，我才想运行一个函数。您的代码只是将处理程序连接到每个iframe。如果iframe 5 在iframe 2 之前完成加载怎么办？在这种情况下，您的代码会运行，但我不希望它运行。
您希望它静默失败，还是希望所有回调依次执行？
如果iframe 5 在iframe 2 之前完成加载，我只想让它等到iframe 2 加载，然后运行一个函数。以上是关于如何设置在加载所有动态添加的 iframe 时触发的 window.onload 事件？的主要内容，如果未能解决你的问题，请参考以下文章
加载和渲染 iframe 及其 CSS 时，如何触发 jQuery 警报？