1

Comment puis-je supprimer beforeunload des écouteurs d'événements ajoutés par l'iFrame? Mon cas est le iframe que je charge ajouter quelques beforeunload événements au DOM, que je veux supprimer au cas où la session expire (ou dire pour un événement particulier) et je ne veux pas montrer le message de confirmation à l'utilisateur. Donc est-il possible de supprimer les écouteurs d'événements de l'iframe en utilisant javascript? Toute aide serait appréciée.Comment supprimer les écouteurs d'événement beforeunload ajoutés par iFrame?

// Parent.html

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Parent Frame</title> 
    <script> 
     window.addEventListener('beforeunload', function(event) { 
     console.log('I am the 1st one.'); 
     }); 
     window.addEventListener('unload', function(event) { 
     console.log('I am the 3rd one.'); 
     }); 
    </script> 
    </head> 
    <body> 
    <iframe src="child-frame.html"></iframe> 
    </body> 
</html> 

// child.html

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Child Frame</title> 
    <script> 
     window.addEventListener('beforeunload', function(event) { 
     console.log('I am the 2nd one.'); 
     }); 
     window.addEventListener('unload', function(event) { 
     console.log('I am the 4th and last one…'); 
     }); 
    </script> 
    </head> 
    <body> 
     ☻ 
    </body> 
</html> 
+0

vous aurez besoin de changer la façon dont l'écouteur d'événement est ajouté sur 'child.html' - Je suppose que vous pouvez modifier le code sur' child.html', non? –

Répondre

1

Je ne pouvais reproduire ce comportement que sur chrome, FF ne semble pas déclencher l'événement sur les iframes.

Une solution que je trouve (peut-être pas le meilleur), est d'enlever le iframe avant de quitter la page:

mainWindow.onbeforeunload = e => { iframe.parentNode.removeChild(iframe) }; 

De cette façon, l'événement ne bouillonne pas à la fenêtre de l'iframe plus.

// toggle the blocking script 
 
inp.onchange = 
 
    e => window.onbeforeunload = inp.checked ? 
 
    blockMessage : 
 
    null; 
 

 
function blockMessage(e){ 
 
    iframe.parentNode.removeChild(iframe); 
 
    }
<h3>click "Run code snippet" again</h3> 
 
<label>block iframe's beforeunload<input type="checkbox" id="inp"></label><br> 
 
<iframe id="iframe" src="data:text/html,%3Chtml%3E%3Chead%3E%3Cscript%3Eonbeforeunload%20%3D%20e%20%3D%3E%20%22bye%22%3B%3C%2Fscript%3E%3C%2Fhead%3E%3C%2Fhtml%3E"></iframe> 
 

 
<!-- Decoded iframe content : 
 
    <html> 
 
    <head> 
 
    <script> 
 
    \t onbeforeunload = e => "bye"; 
 
    </script> 
 
    </head> 
 
    </html> 
 
-->

0

écrire Ajouter événement fonction d'écouteur séparément. de sorte qu'il peut être utilisé pour supprimer l'auditeur.

function beforeUnload(event) { 
    console.log('I am the 2nd one.'); 
}; 
// creating event listeners 
window.addEventListener('beforeunload', beforeUnload); 

// remove when you don't want the listener 
window.removeEventListener('beforeunload', beforeUnload); 
+0

Je dois supprimer les événements d'iframe de l'hôte – Abhijeet

+0

À ce que vous faites référence à l'hôte? –

+0

parent html est l'hôte présent – Abhijeet