javascript - change - iframe load start event




iFrame src change-t-il la détection d'événement? (5)

D'autres réponses ont proposé l'événement load , mais il se déclenche après le load 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 suivra avec succès les changements d'attributs src , ainsi que les changements d'URL effectués à partir de l'iframe lui-même.

Testé dans tous les navigateurs modernes.

Remarque: L'extrait ci-dessus ne fonctionnera que si l'iframe a la même origine.

J'ai aussi fait un gist de ce code. Vous pouvez vérifier mon autre answer aussi. Cela va un peu en profondeur dans la façon dont cela fonctionne.

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 src via la page parent? Une sorte de surcharge peut-être?

Mon dernier recours est de faire un test d'intervalle de 1 seconde si le iframe src est le même que c'était avant, mais faire cette solution hacky serait nul.

J'utilise la bibliothèque jQuery si cela peut aider.


Depuis la version 3.0 de Jquery vous pourriez avoir une erreur

TypeError: url.indexOf n'est pas une fonction

Ce qui peut être facilement réparé en faisant

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


Si vous n'avez aucun contrôle sur la page et que vous souhaitez observer une sorte de changement, alors la méthode moderne est d'utiliser MutationObserver

Un exemple de son utilisation, en surveillant l'attribut src pour changer d' 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>

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 affichée ici comme la question originale a été fermée en tant que copie de celui-ci.


Vous souhaiterez peut-être utiliser l'événement onLoad , 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 Opera tôt. ( 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>






onload