Erkennen, wenn ein Iframe beginnt, eine neue URL zu laden

Wie kann ich erkennen, dass ein iframe auf meiner Seite beginnt zum laden einer neuen Seite?

Unsere situation ist:

  • Wenn der iFrame-Inhalt zu ändern beginnt, müssen wir die Anzeige "wird geladen" - animation und ausblenden die search-box.
  • Ich weiß, wie man mit den "iframe fertig geladen" - Ereignis (zum ausblenden der animation), aber nicht, wie Sie, fangen die ersten "anfängt sich zu ändern" Ereignis,...

Hinweis:
Ich kann anfügen jquery "klicken Sie auf" Haken, die links auf dem Menü, die funktionieren wird. Jedoch, innerhalb des iframe-Inhalte gibt es viele cross-Referenz-links, und das Ereignis "änderung" gilt auch für Sie! Wir müssen also fangen Ereignis, wenn Benutzer klickt auf einen link innerhalb des iFrames oder wenn die iframe src verändert wird via javascript - weil wir auch zeigen wollen, die laden-animation ein-und ausblenden die search-box.

Kommentar zu dem Problem
Vielleicht kann das helfen: stackoverflow.com/a/4010296/1427878 Kommentarautor: CBroe
Mögliche Duplikate von iFrame src change-Ereignis-Erkennung? Kommentarautor: T.Todua

InformationsquelleAutor der Frage Philipp | 2013-06-26

  1. 16

    Fand ich eine bessere Lösung, wenn iframe-und die container-Seite ist gleichen Ursprung haben, müssen Sie nicht extra-code in die innere Seite:

    <iframe src="same-origin.com" onload="content_finished_loading(this)"></iframe>
<script>
    var indicator = document.querySelector('.loading-indicator');
    var content_start_loading = function() {
        indicator.style.display = 'block';
    };

    var content_finished_loading = function(iframe) {
        indicator.style.display = 'none';
        //inject the start loading handler when content finished loading
        iframe.contentWindow.onunload = content_start_loading;
    };
</script>

    InformationsquelleAutor der Antwort Bruce

  2. 20

    Kam ich auf folgende Lösung - und das ist nur möglich, weil wir kontrollieren den Inhalt des iframe-Inhalts und der host-Fenster

    Innerhalb des iframe fügen wir folgende Skript aus, um die Fußzeile der Seite (alle Seiten verwenden die gleiche Vorlage, so ist dies eine änderung an einer Datei)

    <script>
window.onunload = function() {
    //Notify top window of the unload event
    window.top.postMessage('iframe_change', '*');
};
</script>

    Innerhalb der host-Fenster fügen wir dieses script zur überwachung der iframe Zustand

    function init_content_monitor() {
    var content = jQuery('.iframe');

    //The user did navigate away from the currently displayed iframe page. Show an animation
    var content_start_loading = function() {
        alert ('NOW: show the animation');
    }

    //the iframe is done loading a new page. Hide the animation again
    var content_finished_loading = function() {
        alert ('DONE: hide the animation');
    }

    //Listen to messages sent from the content iframe
    var receiveMessage = function receiveMessage(e){
        var url = window.location.href,
            url_parts = url.split("/"),
            allowed = url_parts[0] + "//" + url_parts[2];

        //Only react to messages from same domain as current document
        if (e.origin !== allowed) return;
        //Handle the message
        switch (e.data) {
            case 'iframe_change': content_start_loading(); break;
        }
    };
    window.addEventListener("message", receiveMessage, false);

    //This will be triggered when the iframe is completely loaded
    content.on('load', content_finished_loading);
}

    InformationsquelleAutor der Antwort Philipp

  3. 0

    Beim erstellen der iframe dynamisch, gehören das ONLOAD-event wie so...

    F=document.createElement('iframe');
F.onload=function(){
    UpdateDetails(
        this.contentWindow.document.title,
        this.contentWindow.location
    );
};
F.src='some url';
document.getElementById('Some_Container').appendChild(F);

    Dem onload-Ereignis wird nun ständig aktualisieren Sie den globalen Variablen unter über die Funktion unten, wie der Benutzer surft im Netz:

    var The_Latest_Title='';
var The_Latest_URL='';
function UpdateDetails(Title,URL){
    The_Latest_Title=Title;
    The_Latest_URL=URL;
}

    InformationsquelleAutor der Antwort user6242961

  4. 0

    Gibt es bereits eine mögliche Lösung auf: iFrame src change-Ereignis-Erkennung?

    Jedoch, wenn Sie wollen, um zu manipulieren, der Ziel-Seite, dann ist es nicht nötig, berühren Sie die iframe-target-Datei Inhalt. Fügen Sie einfach die richtige JS-code in der übergeordneten Seite zugreifen kann DENSELBEN URSPRUNG iframe. Ich benutzte so etwas wie dieses:

    <iframe id="xyz" ....>
.....
<script>
var iframeElement = document.getElementById("xyz");
var iframe_El = iframeElement.contentDocument || iframeElement.contentWindow.document;
//manipulate iframe_El wih "on complete" events and like that.
....
</script>

    mehr unter: https://jsfiddle.net/Lnb1stc8/

    InformationsquelleAutor der Antwort T.Todua

Schreibe einen Kommentar