web-dev-qa-db-ja.com

IFRAMEのコンテンツをクリアする方法は？

空白ページをロードせずに、javascriptを使用してIFRAME要素のコンテンツをクリアするにはどうすればよいですか？

私はこれを行うことがわかります：iframe_element.src = "blank.html"、しかし、より良い、インスタントの方法がなければなりません。

javascripthtmliframe
60
sikender
about:blank

空白の「URL」です。常に明確です

ページのソースをそれに設定することができ、クリアします。

96
McKay
var iframe = document.getElementById("myiframe");
var html = "";

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

iE、Firefox、およびChrome ...でテストしました:)

13
Bogdan

あなたのテクニックは最も堅牢です。それは私が自分自身を使用するものです。 HTTPS経由でコンテンツが配信される場合があり、about：blankを使用すると、「安全でない場所のコンテンツを含めますか」などの警告メッセージが表示される場合があります。

瞬間的なものは認識の問題ですが、サイトに1つのBlank.htmlファイルがあり、長いキャッシュの有効期限が設定されている場合、クライアントはページを一度しか取得しません（セッションごとに最大1回）。

7
AnthonyWJones

または、これを行うことができます：

var iframe_element = window.frames['iframe_name'];
iframe_element.document.open();
iframe_element.document.close();
3
Khalid

これを行うこともできます：

<html>
<head>
<script>
    var doc = null;
    window.onload = function() {
        alert("Filling IFrame");
        doc = document.getElementById("test");

        if( doc.document ) {
            document.test.document.body.innerHTML = "<h1>test</h1>"; //Chrome, IE
        }else {
            doc.contentDocument.body.innerHTML = "<h1>test</h1>"; //FireFox
        }

            setTimeout(function() { 
                alert("Clearing IFrame");

                if( doc.document ) {
                    document.test.document.body.innerHTML = ""; //Chrome, IE
                }else {
                    doc.contentDocument.body.innerHTML = ""; //FireFox
                }

            }, 1000);
        };
    </script>
</head>

<body>
    <iframe id="test" name="test">

    </iframe>
</body>
</html>
2
Jared

多くのIFrameがあるページで「about：blank」に問題がありました。すべてのブラウザで有効な場所ではないようです（しかし、私は確かに見つけませんでした）。とにかく、javascript:void(0);に満足しています

2
Pekka 웃

//まず、IDからウィンドウを取得します。

var my_content = document.getElementById('my_iframe').contentWindow.document;

//次に、bodyタグの内部HTMLを空の文字列に設定することにより、これをクリアします。

my_content.body.innerHTML="";

//これで、新しいコンテンツを作成しても、本文の最後に追加されず、iframeの本文には新しいコンテンツのみが含まれます。

my_content.write(new_content);
1
Keith