web-dev-qa-db-fra.com

Déchargement/Suppression de contenu d'un iFrame

Est-il possible de décharger une page qui a été chargée dans un iframe? Je ne veux pas changer l'iframe src en une page vierge si possible. Je cherche fondamentalement quelque chose qui puisse faire quelque chose comme ceci $('#frameID').attr("src","");, sauf que le code ne semble pas effacer la page précédemment chargée.

Existe-t-il une fonction "unload" que je peux appeler, qui réinitialisera l'iframe afin qu'aucun contenu ne soit chargé à l'intérieur?

javascriptjqueryeventsdomiframe
32
Dan

Les autres solutions utilisent innerHTML, ce qui ne fonctionnera pas toujours en XHTML. Ils effacent également uniquement document.body (tout ce qui est dans le <head> est toujours présent). Voici une solution qui utilise le DOM:

var frame = document.getElementById("myFrame"),
frameDoc = frame.contentDocument || frame.contentWindow.document;
frameDoc.removeChild(frameDoc.documentElement);

Cette solution utilise innerHTML:

var frame = document.getElementById("myFrame"),
frameDoc = frame.contentDocument || frame.contentWindow.document;
frameDoc.documentElement.innerHTML = "";
28
Eli Grey

Essaye ça,

$("iframe").contents().find("body").html('');

Cela efface seulement innerHTML de votre balise à l'intérieur et ne décharge pas réellement votre iframe, vous pouvez donc réutiliser votre iframe sans le recharger et son fonctionnement dans tous les navigateurs est simple!

7
mayurk

Si vous générez de manière dynamique le contenu de votre iframe, tous les scripts/variables chargés fuiront d’une écriture à l’autre. Ainsi, la solution fournie par @Eli de supprimer l’élément dom ne fonctionnera pas.

En bref:

Pour nettoyer, encapsulez votre iframe dans un élément div et remplacez son contenu dom.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="wrapper">
    <iframe id="test"></iframe>
  </div>
</body>
</html>

Nettoyer:

var wrapper = document.getElementById('wrapper');
wrapper.innerHTML= "<iframe id='test'></iframe>";

En détail: démonstration de la fuite de script

Exemple de fuite de script entre deux écritures iframe (testé avec Chrome):

var iframe = document.getElementById('test');

// define variable 'a'
var content = "<html><body><script>var a=555;</script></body></html>";

iframe.contentWindow.document.open();
iframe.contentWindow.document.write(content);
iframe.contentWindow.document.close();

// uncomment this to clean the iframe
//document.getElementById('wrapper').innerHTML= "<iframe id='test'></iframe>";

// write 'a' if defined
var content2 = "<html><body><div id='content'></div><script>document.getElementById('content').innerHTML=typeof a === 'undefined' ? 'undefined' : a;</script></body></html>";

var iframe2 = document.getElementById('test');
iframe2.contentWindow.document.open();
iframe2.contentWindow.document.write(content2);
iframe2.contentWindow.document.close();

Si vous exécutez ce code, vous verrez que la sortie de la deuxième iframe est 555 bien qu'elle ait été définie dans la première iframe.

Si vous décommentez la partie centrale, cela fonctionnera comme prévu.

Question connexe: Eviter les fuites de mémoire lors du chargement du contenu dans un iframe

5
JBE

$ ('# frameID'). contentWindow.document.body.innerHTML = '';

Comme avec n'importe quel iframe, cela ne fonctionne que si vous êtes sur le même domaine.

4
Steve Brewer
var frame = document.getElementById("myframe");
frame.src = "about:blank";

Cela fonctionnait avec moi et empêchait aussi les fuites de mémoire . Dans mon cas, je devais aussi détruire le parent. Dans ce cas, vous devez détruire le parent avec un certain délai pour éviter les fuites de mémoire.

3
Antonis

Supprimer et recréer l'iframe est la solution la plus intelligente ici (aucune offense pour les autres réponses).

En supprimant uniquement la innerHTML de l'iframe, vous ne videz pas les variables stockées, les eventListeners liés, etc.

Soyez prudent avec ceci, cela pourrait causer beaucoup de problèmes (comme des fuites de mémoire, plusieurs déclencheurs du même événement, etc.).

2
Adonis K. Kakoulidis
$("#frameId").contents().find("div#SomeDIVinsideFrame").remove(); // removes some div content inside iframe

$("#FrameId").remove(); // removes frame

avait le même problème pour afficher les nouvelles iframe sur http://www.livepage.info

2
Besik

Vous pouvez déclencher un événement de déchargement de cette iframe comme

$('body').trigger('unload');

puis supprimez l'iframe de la fenêtre parente et rechargez une nouvelle iframe avec une nouvelle src si nécessaire.

$('#iframe_wrapper').html('');
$('#iframe_wrapper').html('<iframe src="...">');
1
Kumar

D'abord, obtenez le document du cadre:

var frame = $('#frameId').get(0);
var frameDoc = frame.contentDocument || frame.contentWindow.document;

Puis, en blanc:

frameDoc.getElementsByTagName('body')[0].innerHTML = "";

Je pense que cela devrait fonctionner aussi:

$('body', frameDoc).html("");

Maintenant, vous voudrez peut-être utiliser quelque script que ce soit qui pourrait être chargé dans la tête, mais cela devrait vous aider à démarrer.

1
geowa4
function getContentFromIframe(iFrameName)
{

var myIFrame = document.getElementById(iFrameName);
var content = myIFrame.contentWindow.document.body.innerHTML;

//Do whatever you need with the content    

}

ça va définitivement marcher !!!!!!!!!!!!!!!!

0
Frank James

Si vous aviez précédemment chargé du contenu en définissant la propriété src de l'iframe, vous ne pouvez pas vider le contenu car il s'agit d'une violation du script intersite.

Vous pouvez ensuite simplement définir la propriété src sur '' pour que le navigateur supprime le contenu entier.

$('iframe').prop('src', '');
0
qwertzguy

Cela a fonctionné pour moi, tout effacé dans la balise iframe; corps, tête, html et tous:

$("iframe").contents().empty();
0
sevmusic