iFrame src改变事件检测？

Question

假设我无法控制iframe中的内容,是否有任何方法可以通过父页面检测到src更改？某种上载可能吗？

我的最后一招是如果iframe src与以前相同,则进行1秒间隔测试,但是做这个hacky解决方案会很糟糕.

如果它有帮助我正在使用jQuery库.

Answer 1

您可能希望使用该onLoad事件,如以下示例所示:

<iframe src="http://www.google.com/" onLoad="alert('Test');"></iframe>

只要iframe中的位置发生更改,系统就会弹出警报.它适用于所有现代浏览器,但可能无法在IE5和早期Opera等一些非常老的浏览器中使用.(来源)

如果iframe在父级的同一域中显示页面,您将能够访问该位置contentWindow.location,如下例所示:

<iframe src="/test.html" onLoad="alert(this.contentWindow.location);"></iframe>

Answer 2

答案基于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

Answer 3

如果您无法控制页面并希望观察某种变化,那么现代方法就是使用 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上

在这里发布答案,因为原始问题被关闭作为这个问题的副本.

Answer 4

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);
    }

Answer 5

其他答案提出了该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起源相同的情况下有效。

我做了一个要点与此代码。您也可以查看我的其他答案。它将对它的工作原理进行一些深入的介绍。

Answer 6

从 Jquery 3.0 版本开始你可能会得到一个错误

类型错误：url.indexOf 不是函数

通过这样做可以轻松修复

$('#iframe').on('load', function() {
    alert('frame has (re)loaded ');
});