假设我对iframe中的内容没有控制,是否有任何方法可以通过父页检测到src的变化?也许是某种onload ?
我的最后一招是做一个1秒间隔测试,如果iframe src与之前相同,但做这个hack解决方案会很糟糕。
我正在使用jQuery库,如果它有帮助。
假设我对iframe中的内容没有控制,是否有任何方法可以通过父页检测到src的变化?也许是某种onload ?
我的最后一招是做一个1秒间隔测试,如果iframe src与之前相同,但做这个hack解决方案会很糟糕。
我正在使用jQuery库,如果它有帮助。
当前回答
如果您无法控制页面,并希望观察某种变化,那么现代的方法是使用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/
据jsFiddle
在这里张贴的答案是原来的问题,作为这个问题的副本关闭。
其他回答
基于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/#breaking-change-load-unload-and-error-removed
你可能想使用onLoad事件,如下面的例子所示:
<iframe src="http://www.google.com/" onLoad="alert('Test');"></iframe>
当iframe中的位置发生变化时,警报将弹出。它可以在所有现代浏览器中运行,但可能不能在一些非常老的浏览器中运行,如IE5和早期的Opera。(源)
如果iframe显示的页面位于父域的同一域中,您将能够通过contentWindow访问该位置。位置,如下例所示:
<iframe src="/test.html" onLoad="alert(this.contentWindow.location);"></iframe>
如果您无法控制页面,并希望观察某种变化,那么现代的方法是使用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/
据jsFiddle
在这里张贴的答案是原来的问题,作为这个问题的副本关闭。
注意:该代码段仅在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);
}