iFrame src ubah deteksi acara?

Dengan asumsi saya tidak memiliki kontrol atas konten di iframe, apakah ada cara saya bisa mendeteksi perubahan src di dalamnya melalui halaman induk? Semacam beban mungkin?

Pilihan terakhir saya adalah melakukan tes interval 1 detik jika iframe src sama dengan sebelumnya, tetapi melakukan solusi hacky ini akan menyedot.

Saya menggunakan perpustakaan jQuery jika itu membantu.

Anda mungkin ingin menggunakan onLoadacara tersebut, seperti dalam contoh berikut:

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

Lansiran akan muncul setiap kali lokasi dalam iframe berubah. Ini bekerja di semua browser modern, tetapi mungkin tidak berfungsi di beberapa browser yang sangat lama seperti IE5 dan Opera awal. ( Sumber )

Jika iframe menampilkan halaman dalam domain induk yang sama , Anda dapat mengakses lokasi dengan contentWindow.location, seperti dalam contoh berikut:

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

Jawaban berdasarkan JQuery <3

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

Seperti yang disebutkan oleh subharb, seperti dari JQuery 3.0 ini perlu diubah menjadi:

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

https://jquery.com/upgrade-guide/3.0/#breaking-change-load-unload-and-error-removed

Jika Anda tidak memiliki kendali atas halaman dan ingin melihat beberapa jenis perubahan maka metode modern yang digunakan MutationObserver

Contoh penggunaannya, mengamati srcatribut berubah dariiframe

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>

Keluaran setelah 3 detik

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/ 

Di jsFiddle

Diposting jawaban di sini karena pertanyaan awal ditutup sebagai duplikat dari pertanyaan ini.

Catatan: Cuplikan hanya akan berfungsi jika iframe dengan asal yang sama.

Jawaban lain mengusulkan loadacara tersebut, tetapi muncul setelah halaman baru di iframe dimuat. Anda mungkin perlu diberi tahu segera setelah URL berubah , bukan setelah halaman baru dimuat.

Inilah solusi JavaScript sederhana:

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>

Ini akan berhasil melacak srcperubahan atribut, serta setiap perubahan URL yang dibuat dari dalam iframe itu sendiri.

Diuji di semua browser modern.

Saya membuat inti dengan kode ini juga. Anda dapat memeriksa jawaban saya yang lain juga. Ini sedikit mendalam tentang bagaimana ini bekerja.

Iframe selalu menyimpan halaman induk, Anda harus menggunakan ini untuk mendeteksi di halaman mana Anda berada di iframe:

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

Karena versi 3.0 dari Jquery Anda mungkin mendapatkan kesalahan

TypeError: url.indexOf bukan fungsi

Yang dapat dengan mudah diperbaiki dengan melakukan

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

Berikut adalah metode yang digunakan dalam Commerce SagePay dan modul Commerce Paypoint Drupal yang pada dasarnya membandingkan document.location.hrefdengan nilai lama dengan terlebih dahulu memuat iframe sendiri, kemudian eksternal.

Jadi pada dasarnya idenya adalah memuat halaman kosong sebagai pengganti dengan kode JS dan bentuk tersembunyi. Kemudian kode induk JS akan mengirimkan formulir tersembunyi di mana #actionmenunjuk ke iframe eksternal. Setelah pengalihan / pengiriman terjadi, kode JS yang masih berjalan di halaman itu dapat melacak document.location.hrefperubahan nilai Anda .

Berikut ini contoh JS yang digunakan di iframe:

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

Dan di sini JS digunakan di halaman induk:

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

Kemudian di halaman pendaratan sementara yang kosong, Anda harus memasukkan formulir yang akan dialihkan ke halaman eksternal.