假设我无法控制 iframe 中的内容，有什么方法可以通过父页面检测其中的 src 更改吗？也许某种加载？
如果 iframe src 与以前相同，我最后的手段是进行 1 秒的间隔测试，但是执行这种 hacky 解决方案会很糟糕。
如果有帮助，我正在使用 jQuery 库。
iFrame src 更改事件检测？
IT技术
javascript
jquery
iframe
onload
2021-01-26 11:03:48
6个回答
您可能想要使用该onLoad事件，如下例所示：
<iframe src="http://www.google.com/" onLoad="alert('Test');"></iframe>
每当 iframe 中的位置发生变化时，就会弹出警报。它适用于所有现代浏览器，但可能不适用于一些非常旧的浏览器，如 IE5 和早期的 Opera。（来源）
如果 iframe 显示在 parent 的同一域中的页面，您将能够使用 访问该位置contentWindow.location，如下例所示：
<iframe src="/test.html" onLoad="alert(this.contentWindow.location);"></iframe>
基于 JQuery < 3 的答案
$('#iframeid').load(function(){
alert('frame has (re)loaded');
});
正如 subharb 所提到的，从 JQuery 3.0 开始，这需要更改为：
$('#iframe').on('load', function() {
alert('frame has (re)loaded ');
});
https://jquery.com/upgrade-guide/3.0/#break-change-load-unload-and-error-removed
如果您无法控制页面并希望观看某种更改，那么现代方法是使用 MutationObserver
它的使用示例，观察src属性的变化iframe
new MutationObserver(function(mutations) {
mutations.some(function(mutation) {
if (mutation.type === 'attributes' && mutation.attributeName === 'src') {
console.log(mutation);
console.log('Old src: ', mutation.oldValue);
console.log('New src: ', mutation.target.src);
return true;
}
return false;
});
}).observe(document.body, {
attributes: true,
attributeFilter: ['src'],
attributeOldValue: true,
characterData: false,
characterDataOldValue: false,
childList: false,
subtree: true
});
setTimeout(function() {
document.getElementsByTagName('iframe')[0].src = 'http://jsfiddle.net/';
}, 3000);<iframe src="http://www.google.com"></iframe>3秒后输出
MutationRecord {oldValue: "http://www.google.com", attributeNamespace: null, attributeName: "src", nextSibling: null, previousSibling: null…}
Old src: http://www.google.com
New src: http://jsfiddle.net/
注意：该代码段仅在 iframe 具有相同来源时才有效。
其他答案提出了该load事件，但它会在iframe 中的新页面加载后触发。您可能需要在 URL 更改后立即收到通知，而不是在加载新页面之后。
这是一个简单的 JavaScript 解决方案：
function iframeURLChange(iframe, callback) {
var unloadHandler = function () {
// Timeout needed because the URL changes immediately after
// the `unload` event is dispatched.
setTimeout(function () {
callback(iframe.contentWindow.location.href);
}, 0);
};
function attachUnload() {
// Remove the unloadHandler in case it was already attached.
// Otherwise, the change will be dispatched twice.
iframe.contentWindow.removeEventListener("unload", unloadHandler);
iframe.contentWindow.addEventListener("unload", unloadHandler);
}
iframe.addEventListener("load", attachUnload);
attachUnload();
}
iframeURLChange(document.getElementById("mainframe"), function (newURL) {
console.log("URL changed:", newURL);
});<iframe id="mainframe" src=""></iframe>这将成功跟踪src属性更改，以及从 iframe 本身进行的任何 URL 更改。
在所有现代浏览器中测试。
iframe 始终保留父页面，您应该使用它来检测您在 iframe 中的哪个页面：
html代码：
<iframe id="iframe" frameborder="0" scrolling="no" onload="resizeIframe(this)" width="100%" src="www.google.com"></iframe>
JS：
function resizeIframe(obj) {
alert(obj.contentWindow.location.pathname);
}
其它你可能感兴趣的问题