web-dev-qa-db-ja.com

document.body.innerHTML = ""はWebページをクリアしますか？

FF 3.0で以下のページを更新すると、Webページがクリアされると思っていましたが、クリアされませんでした。

なぜdocument.body.innerHTML = ""ページをクリアしますか？

PDATE：新しいページの読み込み中に更新中に前の画面をクリアしようとしています。私は実際にページをクリアして、待ってから次のjsを実行したいのです。ページが読み込まれた後に画面をクリアしたくありません。

...
<body>
    <script type="text/javascript">
        document.body.innerHTML = "";
        for (var i = 0; i < 1000000000; i++) {
        }
    </script>

    <img src="images/web.gif" /><br />

    <script type="text/javascript">
        document.write( "hello<br />");
    </script>

    <img src="images/warning.png" /><br />

</body>
javascriptfirefoxdominnerhtml
26
Tony_Henrich

document.body.innerHTML = '';はbodyをクリアします。しかし、コードが実行された瞬間のinnerHTMLはクリアされます。画像とスクリプトが実際にbodyにある前にコードを実行すると、bodyをクリアしようとしますが、クリアするものは何もありません。

bodyをクリアする場合は、bodyがコンテンツで満たされた後にコードを実行する必要があります。これを行うには、<script>ブロックをbodyの最後の子として配置し、コードを実行する前にすべてをロードするか、何らかの方法でdom:loadedイベントをリッスンする必要があります。

44
Douwe Maan

Douwemの答えを詳しく説明するには、スクリプトタグでコードをonloadに入れます。

<script type="text/javascript">
    window.onload=function(){
       document.body.innerHTML = "";
    }
</script>
14
Erik

Douwe MaanとErikの回答には同意しますが、ここには他にも役立つと思われるものがいくつかあります。

まず、headタグ内で、個別のJavaScriptファイルを参照して、再利用可能にすることができます。

<script language="JavaScript" src="/common/common.js"></script>

common.jsは、commonという最上位ディレクトリにある再利用可能な関数ファイルです。

次に、setTimeoutを使用してスクリプトの操作を遅らせることができます。例：

setTimeout(someFunction, 5000);

2番目の引数はミリ秒単位です。これは、元のコードスニペットで何かを遅らせようとしているように見えるためです。

3
Rich Harding

他の人が言っていたように、簡単な解決策は、すべてのDOM要素が上から下に同期してロードされるため、ページの下部にスクリプトを配置することです。そうでなければ、あなたが探しているのは、エリックが言ったようにdocument.onload(() => {callback_body})またはwindow.onload(() => {callback_body})だと思います。これらにより、Douwe Maanが言ったように、dom:loadedイベントが発生したときにスクリプトを実行できます。 window.onloadのプロパティについてはわかりませんが、document.onloadはすべての要素、CSS、およびスクリプトがロードされた後にのみトリガーされます。あなたの場合：

<script type="text/javascript">
    document.onload(() =>
        document.body.innerHTML = "";
    )
</script>
0
ThisGuyCantEven

あなたが何を達成しようとしているのかわかりませんが、jQueryの使用を検討することをお勧めします。これにより、コードをheadタグまたは別のスクリプトファイルに配置し、DOMのロード後にコードを実行できます。

次のようなことができます：

$(document).ready(function() {
$(document).remove();
});

要素を選択的に削除するだけでなく（すべてのDIV、特定のクラスを持つDIVのみなど）

0
Andy Shellam