web-dev-qa-db-ja.com

iFrameからコンテンツをアンロード/削除する

とにかく、iframe内にロードされたページをアンロードする方法はありますか？可能であれば、iframe srcを空白ページに変更したくありません。私は基本的に、この$('#frameID').attr("src","");のようなことをするものを探していますが、コードは以前にロードされたページをクリアしないようです。

ありますか "unload"呼び出すことができる関数で、iframeをリセットして、コンテンツがロードされないようにしますか？

javascriptjqueryeventsdomiframe
35
Dan

他のソリューションではinnerHTMLを使用しますが、XHTMLでは常に機能するとは限りません。また、document.body（<head>はまだ存在しています）。 DOMを使用するソリューションは次のとおりです。

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

このソリューションではinnerHTMLを使用します。

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

これを試して、

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

内部のタグのinnerHTMLをクリアするだけで、実際にiframeをアンロードしないため、iframeを再ロードせずに再利用できます。

7
mayurk

Iframeのコンテンツを動的に生成した場合、ロードされたすべてのスクリプト/変数が1つの書き込みから別の書き込みにリークします。したがって、@ Eliが提供するdom要素のクリアのソリューションは機能しません。

要するに：

きれいにするには、iframeをdiv要素にラップし、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>

きれいにするため：

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

詳細：スクリプト漏洩のデモ

2つのiframe書き込み間のスクリプトリークの例（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();

このコードを実行すると、2番目のiframeの出力は555最初のiframeで定義されていますが。

中間部分のコメントを外すと、期待どおりに機能します。

関連質問： メモリリークを回避してコンテンツをiframeにロードする

5
JBE

$（ '＃frameID'）。contentWindow.document.body.innerHTML = '';

他のiframeと同様に、これは同じドメインにいる場合にのみ機能します。

4
Steve Brewer

ここでは、iframeを削除して再作成するのが最も賢明なソリューションです（他の答えに反することはありません）。

IframeのinnerHTMLのみを削除することにより、保存された変数、バインドされたeventListenersなどをフラッシュしません。

これに注意してください、それは多くの問題を引き起こす可能性があります（メモリリーク、同じイベントの複数のトリガーなど）。

3
Adonis K. Kakoulidis
var frame = document.getElementById("myframe");
frame.src = "about:blank";

これは私から働いて、メモリリークも防ぎました。私の場合、私も親を破壊しなければなりませんでした。その場合、メモリリークを防ぐために、少し遅れて親を破棄する必要があります

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

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

http://www.livepage.info でiframeニュースを表示するのと同じ問題がありました

2
Besik

あなたはそのiframeのアンロードイベントを次のようにトリガーできます

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

その後、親ウィンドウからiframeを削除し、必要に応じて新しいsrcで新しいiframeをリロードします。

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

最初に、フレームのドキュメントを取得します。

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

次に、空白にします。

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

私はこれもうまくいくと思う：

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

さて、頭にロードされている可能性のあるスクリプトで何かをしたいかもしれませんが、これはあなたを始めるはずです。

1
geowa4
function getContentFromIframe(iFrameName)
{

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

//Do whatever you need with the content    

}

それは間違いなく動作します!!!!!!!!!!!!!!!!

0
Frank James

Iframeのsrcプロパティを設定して以前にコンテンツをロードしたことがある場合、クロスサイトスクリプティングの違反であるため、コンテンツを空にすることはできません。

その後、srcプロパティを''に設定するだけで、ブラウザはコンテンツ全体を破棄します。

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

これでうまくいき、iframeタグ内のすべてがクリアされました。 body、head、htmlおよびすべて：

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