iFrame src変更イベントの検出？

iframeのコンテンツを制御できない場合、親ページを介してsrcの変更を検出する方法はありますか？ある種のオンロードかもしれませんか？

私の最後の手段は、iframe srcが以前と同じである場合に1秒間隔のテストを行うことですが、このハッキーなソリューションを実行するのは面倒です。

役立つ場合は、jQueryライブラリを使用しています。

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>

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

ページを制御できず、何らかの変更を監視したい場合は、現代的な方法で 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);
    }

Jqueryのバージョン3.0以降、エラーが発生する可能性があります

TypeError：url.indexOfは関数ではありません

これを行うことで簡単に修正できます

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

Commerce SagePayとCommerce Paypoint Drupalモジュールで使用されるメソッドは次のとおりです。document.location.href、最初に独自のiframeをロードし、次に外部のiframeをロードすることで古い値します。

したがって、基本的には、独自のJSコードと非表示のフォームを持つプレースホルダーとして空白のページをロードするという考えです。次に、親のJSコードは、その非表示フォームが#action外部iframeを指す場所に送信します。リダイレクト/送信が行われると、そのページでまだ実行されているJSコードは、document.location.href値の変更を。

iframeで使用されるJSの例を次に示します。

;(function($) {
  Drupal.behaviors.commercePayPointIFrame = {
    attach: function (context, settings) {
      if (top.location != location) {
        $('html').hide();
        top.location.href = document.location.href;
      }
    }
  }
})(jQuery);

そして、これが親ページで使用されているJSです：

;(function($) {
  /**
   * Automatically submit the hidden form that points to the iframe.
   */
  Drupal.behaviors.commercePayPoint = {
    attach: function (context, settings) {
      $('div.payment-redirect-form form', context).submit();
      $('div.payment-redirect-form #edit-submit', context).hide();
      $('div.payment-redirect-form .checkout-help', context).hide();
    }
  }
})(jQuery);

次に、一時的な空白のランディングページに、外部ページにリダイレクトするフォームを含める必要があります。