web-dev-qa-db-de.com

Entladen/Entfernen von Inhalten aus einem iFrame

Gibt es überhaupt eine Seite, die in einen iframe geladen wurde? Ich möchte das iframe src möglichst nicht in eine leere Seite ändern. Ich bin grundsätzlich auf der Suche nach etwas, das so etwas wie $('#frameID').attr("src",""); tun kann, außer dass der Code die zuvor geladene Seite nicht zu löschen scheint.

Gibt es eine "unload"-Funktion, die ich aufrufen kann, die den iframe zurücksetzt, damit kein Inhalt geladen wird?

32
Dan

Die anderen Lösungen verwenden innerHTML, was in XHTML nicht immer funktioniert. Sie löschen auch nur document.body (irgendetwas in <head> ist noch vorhanden). Hier ist eine Lösung, die das DOM verwendet:

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

Diese Lösung verwendet innerHTML:

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

Versuche dies,

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

Es löscht nur innerHTML von Ihrem Tag und entlädt Ihren Iframe nicht wirklich, sodass Sie Ihren Iframe wiederverwenden können, ohne ihn neu zu laden, und er funktioniert in allen Browsern. Ganz einfach !!

7
mayurk

Wenn Sie dynamisch den Inhalt Ihres Iframes generieren, werden alle geladenen Skripts/Variablen von einem Schreibvorgang zum anderen durchgespielt. Daher ist die von @Eli bereitgestellte Lösung des Löschens des dom-Elements wird nicht funktionieren.

Zusamenfassend:

Um es zu säubern, wickeln Sie Ihren iframe in ein div-Element ein und ersetzen Sie den dom-Inhalt.

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

Reinigen:

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

In Details: Demo von Skriptleckagen

Beispiel für ein Skriptleck zwischen zwei iframe-Schreibvorgängen (getestet mit 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();

Wenn Sie diesen Code ausführen, wird die Ausgabe des zweiten Iframes 555 angezeigt, obwohl dies im ersten Iframe definiert wurde.

Wenn Sie den mittleren Teil auskommentieren, funktioniert er wie erwartet.

Verwandte Frage: Vermeidung von Speicherverlusten beim Laden von Inhalten in einen iframe

5
JBE

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

Wie bei jedem iframe funktioniert dies nur, wenn Sie sich in derselben Domäne befinden.

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

Dies funktionierte von mir und verhinderte auch Speicherlecks ... In meinem Fall musste ich auch die Eltern zerstören. In diesem Fall müssen Sie den Elternteil mit einer gewissen Verzögerung zerstören, um Speicherverlust zu verhindern

3
Antonis

Das Entfernen und Wiederherstellen des Iframes ist hier die intelligenteste Lösung (keine Beleidigung der anderen Antworten).

Wenn Sie nur die Variable innerHTML des iframes entfernen, leeren Sie die gespeicherten Variablen, die gebundenen eventListener usw. nicht.

Seien Sie vorsichtig, da dies zu vielen Problemen führen kann (z. B. Speicherverluste, mehrere Auslöser desselben Ereignisses usw.).

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

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

hatte dasselbe Problem, um die News von http://www.livepage.info anzuzeigen

2
Besik

Sie können ein Entladeereignis dieses iframe wie auslösen

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

und entfernen Sie dann den iframe aus dem übergeordneten Fenster und laden Sie bei Bedarf einen neuen iframe mit neuer src neu.

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

Holen Sie sich zuerst das Dokument des Frames:

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

Dann leeren Sie es aus:

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

Ich denke, das sollte auch funktionieren:

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

Vielleicht möchten Sie etwas mit Skripten tun, die möglicherweise in den Kopf geladen werden, aber dies sollte Ihnen den Einstieg erleichtern.

1
geowa4
function getContentFromIframe(iFrameName)
{

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

//Do whatever you need with the content    

}

es wird definitiv funktionieren !!!!!!!!!!!!!!!!

0
Frank James

Wenn Sie zuvor Inhalt durch Festlegen der src-Eigenschaft des iframe geladen haben, können Sie den Inhalt nicht leeren, da dies ein Verstoß gegen Cross-Site-Scripting ist.

Sie können dann die src-Eigenschaft einfach auf '' setzen, wodurch der Browser den gesamten Inhalt verwerfen wird.

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

Dies funktionierte für mich und löschte alles im iframe-Tag. Körper, Kopf, HTML und alles:

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