iFrame src Änderungsereigniserkennung?

Angenommen, ich habe keine Kontrolle über den Inhalt im Iframe. Gibt es eine Möglichkeit, eine src-Änderung darin über die übergeordnete Seite zu erkennen? Eine Art Onload vielleicht?

Mein letzter Ausweg ist ein 1-Sekunden-Intervalltest, 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.

Möglicherweise möchten Sie das onLoadEreignis wie im folgenden Beispiel verwenden:

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

Die Warnung wird angezeigt, wenn sich der Speicherort innerhalb des Iframes ändert. Es funktioniert in allen modernen Browsern, aber möglicherweise nicht in einigen sehr älteren Browsern wie IE5 und Early Opera. ( Quelle )

Wenn der Iframe eine Seite in derselben Domäne des übergeordneten Elements anzeigt , können Sie contentWindow.locationwie im folgenden Beispiel auf den Speicherort zugreifen :

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

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

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

Ein Beispiel für seine Verwendung, bei dem srcdarauf geachtet wird, dass sich das Attribut eines ändertiframe

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/ 

Auf jsFiddle

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

Hinweis: Das Snippet funktioniert nur, wenn der Iframe denselben Ursprung hat.

Andere Antworten schlugen das loadEreignis vor, aber es wird ausgelöst, nachdem die neue Seite im Iframe geladen wurde. Möglicherweise müssen Sie sofort benachrichtigt werden, nachdem sich die URL geändert hat , nicht 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 werden die srcAttributänderungen sowie alle URL-Änderungen, die im iframe selbst vorgenommen wurden, erfolgreich verfolgt.

In allen modernen Browsern getestet.

Ich habe auch mit diesem Code einen Kern gemacht . Sie können auch meine andere Antwort überprüfen . Es wird etwas ausführlicher darauf eingegangen, wie dies funktioniert.

Der Iframe behält immer die übergeordnete Seite bei. Sie sollten dies verwenden, um festzustellen, 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);
    }

Seit Version 3.0 von Jquery wird möglicherweise eine Fehlermeldung angezeigt

TypeError: url.indexOf ist keine Funktion

Was leicht zu beheben ist

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

Hier ist die Methode, die in Commerce SagePay- und Commerce Paypoint Drupal-Modulen verwendet wird und die im Grunde genommen document.location.hrefmit dem alten Wert verglichen wird, indem zuerst ein eigener, dann ein externer Iframe geladen wird .

Grundsätzlich besteht die Idee darin, die leere Seite als Platzhalter mit eigenem JS-Code und verstecktem Formular zu laden. Der übergeordnete JS-Code sendet dann das versteckte Formular, in dem es #actionauf den externen Iframe verweist. Sobald die Umleitung / Übermittlung erfolgt ist, kann der JS-Code, der noch auf dieser Seite ausgeführt wird, Ihre document.location.hrefWertänderungen verfolgen .

Hier ist das in iframe verwendete Beispiel-JS:

;(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 in eine temporäre leere Zielseite das Formular einfügen, das zur externen Seite umleitet.