如何检测我页面上的 iframe开始 加载新页面？
我们的情况是：
注意： 我可以将 jquery “click” 钩子附加到菜单上的链接，这将起作用。但是，在 iframe 内容内部有许多交叉引用链接，并且“更改”事件也适用于它们！所以我们需要在 用户点击 iframe 内的链接 或 iframe src 通过 javascript 更改 时捕获事件 - 因为我们还想显示加载动画和隐藏搜索框。
【问题讨论】：
标签： javascript jquery events iframe
如果iframe和容器页面同源，我找到了一个更好的解决方案，不必在内页中添加额外的代码：
<iframe src="same-origin.com" onload="content_finished_loading(this)"></iframe>
<script>
var indicator = document.querySelector('.loading-indicator');
var content_start_loading = function() {
indicator.style.display = 'block';
};
var content_finished_loading = function(iframe) {
indicator.style.display = 'none';
// inject the start loading handler when content finished loading
iframe.contentWindow.onunload = content_start_loading;
};
</script>
【讨论】：
iframe.contentWindow.onbeforeunload 而不是.onunload 会更早地触发回调，实际上只是在发送新请求时。
我想出了以下解决方案——这只是因为我们控制了 iframe 内容和主机窗口的内容
在 iframe 中，我们将以下脚本添加到页面页脚（所有页面使用相同的模板，因此这是对单个文件的更改）
<script>
window.onunload = function() {
// Notify top window of the unload event
window.top.postMessage('iframe_change', '*');
};
</script>
在主机窗口中，我们添加这个脚本来监控 iframe 状态
function init_content_monitor() {
var content = jQuery('.iframe');
// The user did navigate away from the currently displayed iframe page. Show an animation
var content_start_loading = function() {
alert ('NOW: show the animation');
}
// the iframe is done loading a new page. Hide the animation again
var content_finished_loading = function() {
alert ('DONE: hide the animation');
}
// Listen to messages sent from the content iframe
var receiveMessage = function receiveMessage(e){
var url = window.location.href,
url_parts = url.split("/"),
allowed = url_parts[0] + "//" + url_parts[2];
// Only react to messages from same domain as current document
if (e.origin !== allowed) return;
// Handle the message
switch (e.data) {
case 'iframe_change': content_start_loading(); break;
}
};
window.addEventListener("message", receiveMessage, false);
// This will be triggered when the iframe is completely loaded
content.on('load', content_finished_loading);
}
【讨论】：
onbeforeunload，而不是onunload。 OP 明确表示他想知道框架何时开始 加载新的 url。见stackoverflow.com/a/30719095/422845
postMessage 方法的第二个参数是'*'，这意味着messa 被发布到顶部窗口上下文，而不管它托管它的域是什么。所以 iframe 可以托管在其他任何地方。
已经有一个可能的解决方案：iFrame src change event detection?
但是，如果您想操作目标页面，则无需触摸 iframe-target 文件内容。只需在父页面中添加正确的 JS 代码，它就可以访问 SAME-ORIGIN iframe。我用过这样的东西：
<iframe id="xyz" ....>
.....
<script>
var iframeElement = document.getElementById("xyz");
var iframe_El = iframeElement.contentDocument || iframeElement.contentWindow.document;
// manipulate iframe_El wih "on complete" events and like that.
....
</script>
【讨论】：
当您动态创建 iframe 时，像这样包含 ONLOAD 事件...
F=document.createElement('iframe');
F.onload=function(){
UpdateDetails(
this.contentWindow.document.title,
this.contentWindow.location
);
};
F.src='some url';
document.getElementById('Some_Container').appendChild(F);
随着用户上网，onload 事件现在将通过下面的函数不断更新下面的全局变量：
var The_Latest_Title='';
var The_Latest_URL='';
function UpdateDetails(Title,URL){
The_Latest_Title=Title;
The_Latest_URL=URL;
}
【讨论】：