Erkennung von iFrame-src-Änderungsereignissen?

Question 1

Angenommen, ich habe keine Kontrolle über den Inhalt im iframe, gibt es eine Möglichkeit, eine src-Änderung über die übergeordnete Seite zu erkennen? Vielleicht eine Art Onload?

Mein letzter Ausweg besteht darin, einen 1-Sekunden-Intervalltest durchzuführen, wenn der iframe src derselbe ist wie zuvor, aber diese hackige Lösung wäre scheiße.

Ich verwende die jQuery-Bibliothek, wenn es hilft.

Question 2

Vielleicht möchten Sie die verwenden onLoad Ereignis, wie im folgenden Beispiel:

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

Die Warnung wird immer dann angezeigt, wenn sich die Position innerhalb des Iframes ändert. Es funktioniert in allen modernen Browsern, aber möglicherweise nicht in einigen sehr älteren Browsern wie IE5 und frühen Opera. (Quelle)

Wenn der Iframe eine Seite innerhalb derselben Domäne des übergeordneten Elements anzeigtkönnten Sie mit auf den Standort zugreifen contentWindow.locationwie im folgenden Beispiel:

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

Question 3

Antwort basierend auf JQuery < 3

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

Wie von subharb erwähnt, muss dies ab JQuery 3.0 geändert werden in:

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

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

Question 4

Wenn Sie keine Kontrolle über die Seite haben und auf Änderungen achten möchten, sollten Sie die moderne Methode verwenden MutationObserver

Ein Beispiel für seine Verwendung, aufpassen src Attribut zur Änderung von an 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>

Ausgabe nach 3 Sekunden

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/

An jsFiddle

Die hier gepostete Antwort, da die ursprüngliche Frage als Duplikat dieser Frage geschlossen wurde.

Question 5

Notiz: Das Snippet würde nur funktionieren, wenn der Iframe denselben Ursprung hat.

Andere Antworten schlugen vor load Ereignis, aber es feuert nach dem die neue Seite im Iframe wird geladen. Möglicherweise müssen Sie benachrichtigt werden unmittelbar nachdem sich die URL geändert hatnicht nachdem die neue Seite geladen wurde.

Hier ist eine einfache JavaScript-Lösung:

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>

Dadurch wird die erfolgreich verfolgt src Attributänderungen sowie alle URL-Änderungen, die innerhalb des Iframes selbst vorgenommen wurden.

Getestet in allen modernen Browsern.

Ich machte einen Kern auch mit diesem Code. Sie können auch meine andere Antwort überprüfen. Es geht ein wenig in die Tiefe, wie das funktioniert.

Question 6

Der iframe behält immer die übergeordnete Seite bei, Sie sollten dies verwenden, um zu erkennen, auf welcher Seite Sie sich im iframe befinden:

HTML Quelltext:

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

Question 7

Seit Version 3.0 von Jquery kann es zu einer Fehlermeldung kommen

TypeError: url.indexOf ist keine Funktion

Was sich leicht beheben lässt

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

Question 8

Hier ist die Methode, die in verwendet wird Handel SagePay und in Commerce Paypoint Drupal-Module, die im Grunde verglichen werden document.location.href mit dem alten Wert, indem zuerst ein eigenes Iframe geladen wird, dann ein externes.

Die Idee ist also im Grunde, die leere Seite als Platzhalter mit eigenem JS-Code und verstecktem Formular zu laden. Dann wird der übergeordnete JS-Code dieses versteckte Formular dort einreichen, wo es ist #action zeigt auf den externen iframe. Sobald die Umleitung/Übermittlung erfolgt ist, kann der JS-Code, der noch auf dieser Seite ausgeführt wird, Ihre nachverfolgen document.location.href Wert ändert.

Hier ist ein Beispiel für JS, das in iframe verwendet wird:

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

Und hier ist JS, das auf der übergeordneten Seite verwendet wird:

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

Dann müssen Sie auf der temporären leeren Zielseite das Formular einfügen, das auf die externe Seite umleitet.