Détection d'événement de changement iFrame src?

En supposant que je n'ai aucun contrôle sur le contenu de l'iframe, y a-t-il un moyen de détecter un changement de src via la page parent? Une sorte de chargement peut-être?

Mon dernier recours est de faire un test d'intervalle d'une seconde si l'iframe src est le même qu'avant, mais faire cette solution de piratage serait nul.

J'utilise la bibliothèque jQuery si cela aide.

Vous souhaiterez peut-être utiliser l' onLoadévénement, comme dans l'exemple suivant:

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

L'alerte apparaîtra chaque fois que l'emplacement dans l'iframe change. Il fonctionne dans tous les navigateurs modernes, mais peut ne pas fonctionner dans certains navigateurs très anciens comme IE5 et les premiers Opera. ( Source )

Si l'iframe affiche une page dans le même domaine du parent , vous pourrez accéder à l'emplacement avec contentWindow.location, comme dans l'exemple suivant:

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

Réponse basée sur JQuery <3

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

Comme mentionné par subharb, à partir de JQuery 3.0, cela doit être changé en:

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

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

Si vous n'avez aucun contrôle sur la page et que vous souhaitez surveiller une sorte de changement, la méthode moderne consiste à utiliser MutationObserver

Un exemple de son utilisation, en regardant l' srcattribut à changer d'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>

Sortie après 3 secondes

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/ 

Sur jsFiddle

La réponse publiée ici en tant que question d'origine a été fermée comme un double de celle-ci.

Remarque: l'extrait de code ne fonctionnera que si l'iframe a la même origine.

D'autres réponses ont proposé l' loadévénement, mais il se déclenche après le chargement de la nouvelle page dans l'iframe. Vous devrez peut-être être averti immédiatement après la modification de l'URL , et non après le chargement de la nouvelle page.

Voici une solution JavaScript simple:

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>

Cela permettra de suivre avec succès les srcmodifications d'attribut, ainsi que toutes les modifications d'URL effectuées à partir de l'iframe lui-même.

Testé dans tous les navigateurs modernes.

J'ai également fait une idée de ce code. Vous pouvez également vérifier mon autre réponse . Cela explique un peu comment cela fonctionne.

L'iframe conserve toujours la page parent, vous devez l'utiliser pour détecter dans quelle page vous vous trouvez dans l'iframe:

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

Depuis la version 3.0 de Jquery, vous pouvez obtenir une erreur

TypeError: url.indexOf n'est pas une fonction

Ce qui peut être facilement corrigé en faisant

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

Voici la méthode qui est utilisée dans les modules Commerce SagePay et Commerce Paypoint Drupal qui se compare essentiellement document.location.hrefà l'ancienne valeur en chargeant d'abord sa propre iframe, puis une externe.

Donc, fondamentalement, l'idée est de charger la page vierge comme un espace réservé avec son propre code JS et un formulaire caché. Ensuite, le code JS parent soumettra ce formulaire caché où il #actionpointe vers l'iframe externe. Une fois la redirection / soumission effectuée, le code JS qui est toujours en cours d'exécution sur cette page peut suivre vos document.location.hrefchangements de valeur.

Voici un exemple de JS utilisé dans iframe:

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

Et voici JS utilisé dans la page parent:

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

Ensuite, dans la page de destination vierge temporaire, vous devez inclure le formulaire qui redirigera vers la page externe.