web-dev-qa-db-fra.com

Détecter quand une iframe commence à charger une nouvelle URL

Comment puis-je détecter qu'un iframe sur ma page démarre pour charger une nouvelle page?

Notre situation est:

  • Lorsque le contenu iFrame commence à changer, nous devons afficher une animation de "chargement" et masquer la zone de recherche.
  • Je sais comment gérer l'événement "iframe a fini de charger" (pour masquer l'animation) mais pas comment attraper l'événement initial "commençant à changer" ...

Remarque: je peux attacher le crochet "clic" jquery aux liens du menu, ce qui fonctionnera. Cependant, à l'intérieur du contenu iframe, il existe de nombreux liens croisés, et l'événement "change" s'applique également pour eux! Nous devons donc attraper un événement lorsque l'utilisateur clique sur un lien à l'intérieur de l'iframe ou lorsque le iframe src est modifié via javascript - car nous voulons également afficher l'animation de chargement et cachez le champ de recherche.

javascriptjqueryeventsiframe
39
Philipp

J'ai trouvé une meilleure solution si iframe et la page de conteneur sont de la même origine, ne pas avoir à mettre de code supplémentaire dans la page intérieure:

<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>
24
Bruce

J'ai trouvé la solution suivante - qui n'est possible que parce que nous contrôlons le contenu du contenu iframe et de la fenêtre hôte

À l'intérieur de l'iframe, nous ajoutons le script suivant au pied de page (toutes les pages utilisent le même modèle, il s'agit donc d'une modification d'un seul fichier)

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

À l'intérieur de la fenêtre hôte, nous ajoutons ce script pour surveiller l'état iframe

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

Lorsque vous créez dynamiquement l'iframe, incluez l'événement ONLOAD comme ceci ...

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

L'événement onload va maintenant constamment mettre à jour les variables globales ci-dessous via la fonction ci-dessous, lorsque l'utilisateur surfe sur le net:

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

Il existe déjà une solution possible à: iFrame src change event detection?

Cependant, si vous souhaitez manipuler la page cible, il n'est pas nécessaire de toucher le contenu du fichier cible iframe. Ajoutez simplement le code JS correct dans la page parent et il pourra accéder à l'iframe SAME-Origin. J'ai utilisé quelque chose comme ça:

<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>

plus sur: https://jsfiddle.net/Lnb1stc8/

0
T.Todua