iFrame src cambio rilevamento eventi?

Supponendo che non abbia alcun controllo sul contenuto dell'iframe, esiste un modo per rilevare una modifica src tramite la pagina principale? Una sorta di onload forse?

La mia ultima risorsa è fare un test a intervalli di 1 secondo se iframe src è lo stesso di prima, ma fare questa soluzione hacky farebbe schifo.

Sto usando la libreria jQuery se aiuta.

È possibile che si desideri utilizzare l' onLoadevento, come nell'esempio seguente:

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

L'avviso verrà visualizzato ogni volta che cambia la posizione all'interno dell'iframe. Funziona con tutti i browser moderni, ma potrebbe non funzionare con alcuni browser molto vecchi come IE5 e Early Opera. ( Fonte )

Se l'iframe mostra una pagina all'interno dello stesso dominio del genitore , si sarebbe in grado di accedere alla posizione con contentWindow.location, come nell'esempio seguente:

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

Risposta basata su JQuery <3

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

Come indicato da subharb, a partire da JQuery 3.0 questo deve essere modificato in:

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

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

Se non hai alcun controllo sulla pagina e desideri vedere qualche tipo di modifica, utilizza il metodo moderno MutationObserver

Un esempio del suo utilizzo, cercando l' srcattributo per cambiare di uniframe

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>

Uscita dopo 3 secondi

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/ 

Su jsFiddle

La risposta inserita qui come domanda originale è stata chiusa come duplicato di questo.

Nota: lo snippet funzionerebbe solo se l'iframe avesse la stessa origine.

Altre risposte hanno proposto l' loadevento, ma si attiva dopo il caricamento della nuova pagina nell'iframe. Potrebbe essere necessario ricevere una notifica immediatamente dopo la modifica dell'URL , non dopo il caricamento della nuova pagina.

Ecco una semplice soluzione 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>

In questo modo verranno monitorate correttamente le srcmodifiche agli attributi, nonché eventuali modifiche all'URL apportate dall'iframe stesso.

Testato su tutti i browser moderni.

Ho fatto anche un'idea con questo codice. Puoi controllare anche la mia altra risposta . Approfondisce il modo in cui funziona.

L'iframe mantiene sempre la pagina padre, dovresti usarlo per rilevare in quale pagina sei nell'iframe:

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

Dalla versione 3.0 di Jquery potresti ricevere un errore

TypeError: url.indexOf non è una funzione

Che può essere facilmente risolto facendo

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

Ecco il metodo utilizzato in Commerce SagePay e nei moduli Commerce Paypoint Drupal che fondamentalmente si confronta document.location.hrefcon il vecchio valore caricando prima il proprio iframe, quindi uno esterno.

Quindi in sostanza l'idea è quella di caricare la pagina vuota come segnaposto con il proprio codice JS e la sua forma nascosta. Quindi il codice JS padre invierà quella forma nascosta dove #actionpunta all'iframe esterno. Una volta che si verifica il reindirizzamento / invio, il codice JS che è ancora in esecuzione su quella pagina può tenere traccia delle document.location.hrefmodifiche del valore.

Ecco l'esempio JS utilizzato in iframe:

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

Ed ecco JS usato nella pagina principale:

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

Quindi nella pagina di destinazione vuota temporanea è necessario includere il modulo che reindirizzerà alla pagina esterna.