it-swarm.com.de

iFrame src Ereigniserkennung ändern?

Angenommen, ich habe keine Kontrolle über den Inhalt des Iframes. Kann ich eine Änderung des Quellcodes auf der übergeordneten Seite feststellen? Eine Art von Onload vielleicht?

Mein letzter Ausweg ist es, einen 1-Sekunden-Intervalltest durchzuführen, wenn der Iframe-Quellcode derselbe ist wie zuvor, aber diese Hacky-Lösung zu verwenden, wäre zum Kotzen.

Ich verwende die jQuery-Bibliothek, wenn es hilft.

161
Matrym

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

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

Die Warnung wird angezeigt, wenn sich die Position im iframe ändert. Es funktioniert in allen modernen Browsern, aber möglicherweise nicht in allen sehr älteren Browsern wie IE5 und Early Opera. ( Quelle )

Wenn der iframe eine Seite innerhalb derselben Domäne des übergeordneten Elements anzeigt, können Sie mit contentWindow.location As auf den Speicherort zugreifen im folgenden Beispiel:

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

Antwort basiert auf JQuery <3

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

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

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

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

54
Michiel

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

Ein Beispiel für die Verwendung des Attributs src zum Ändern eines 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/ 

On jsFiddle

Antwort hier als Originalfrage wurde als Duplikat dieser Frage geschlossen.

33
Xotic750

Der Iframe behält immer die übergeordnete Seite bei. Verwenden Sie diese Option, 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);
    }
6
Tarik FAMIL

Andere Antworten schlugen das Ereignis load vor, aber es wird ausgelöst after Die neue Seite im iframe wird geladen. 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 Änderungen des src -Attributs sowie alle im iframe selbst vorgenommenen URL-Änderungen erfolgreich nachverfolgt.

Getestet in allen modernen Browsern.

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

Ich habe auch mit diesem Code ein Gist erstellt. Sie können auch meine anderen Antwort überprüfen. Es wird ein bisschen genauer darauf eingegangen, wie dies funktioniert.

3
Hristiyan Dodov

Seit Version 3.0 von Jquery erhalten Sie möglicherweise eine Fehlermeldung

TypeError: url.indexOf ist keine Funktion

Welches kann leicht dadurch behoben werden

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

Hier ist die Methode, die in Commerce SagePay und Commerce Paypoint Drupal= Module verwendet wird, die im Grunde document.location.href Mit dem vergleicht alten Wert, indem zuerst ein eigener, dann ein externer iFrame geladen wird.

Die Idee ist also, die leere Seite als Platzhalter mit eigenem JS-Code und versteckter Form zu laden. Dann übergibt der übergeordnete JS-Code das verborgene Formular, dessen #action Auf den externen iframe verweist. Sobald die Weiterleitung/Übermittlung erfolgt ist, kann der JS-Code, der noch auf dieser Seite ausgeführt wird, Ihre document.location.href - Wertänderungen nachverfolgen.

Hier ist ein JS-Beispiel, 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 in der übergeordneten Seite verwendet:

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

1
kenorb