web-dev-qa-db-ja.com

document.write（）はドキュメントを上書きしますか？

この：

function myFunction()
{
    document.write("sup");
}

次のようにhtmlで呼び出されます：

<div id="myDiv">
    <script>myFunction();</script>
</div>t

文字列supをmyDiv div要素に追加します。まさに私が欲しいものです。ただし、これ：

function loadFile(uri)
{
    var r = new XMLHttpRequest();
    document.write("trying to open: " + uri);
    r.open('GET', uri, true);
    r.send(null);
    r.onreadystatechange = function()
    {
        if (r.readyState == 4)
        {
            myFunction();
        }
    }
}

function myFunction()
{
    document.write("sup");
}

このように呼ばれる：

<div id="myDiv">
    <script>loadFile("filename.txt");</script>
</div>

hTMLファイル全体を上書きしているようです。つまりFirefoxで実行すると、文字列sup（ページのコンテンツ全体）のみが表示されますが、ページはまだロードされているようです（FFのロードアイコンはまだアニメーション化されており、明らかに無限にあります）。

まず、これは、データを提示する高速で便利な方法として、ローカル、オフラインでのみ使用されます（テキストファイルを配置する代わりにhtml + jsとWebブラウザーを使用）。私が欲しいのは、ローカルのテキストファイルを読み込んで、そのコンテンツの一部をHTMLページの一部として配置することです。最初の例と同じですが、テキストファイルを最初にロードします。

javascripthtmlxmlhttprequestdocument.write
20
NPS

問題は、ドキュメントが読み込まれた後にdocument.writeを実行すると、ドキュメント全体が上書きされることです。それより前に実行された場合、上書きされません。

あなたがしたいことは、次のような特定の要素のinnerHtmlを設定することです：

document.getElementById("myDiv").innerHTML="Sup";
25
dave

ブラウザーがhtmlファイルを受け取ったときに何をするかを見てみましょう。

  1. ウィンドウドキュメントが書き込み用に開かれます。テキストファイルを開くことを想像してみてください。
  2. ブラウザはコンテンツをドキュメントに書き込みます。このステップでは多くの魔法が発生します。オブジェクトが作成され、HTMLがボックスとしてレンダリングされます。
  3. ウィンドウドキュメントはドキュメントを閉じます。テキストファイルを保存するようなものです。

現在、最新のブラウザーは、JavaScriptを使用してこれらのタスクを正確に実行できるドキュメントAPIも公開しています。

document.open()を使用して、書き込み用のドキュメントを開くことができます。 document.write()を使用して、ドキュメントへのコンテンツの書き込みを開始することもできます。最後に、document.close()を使用して、文書を閉じて書き込みを行うことができます。ドキュメントは常に書く前に開く必要があるので書く前にdocument.write()を呼び出すと常に暗黙のdocument.open()になります。

document.write()呼び出しをHTMLボディ全体に散在させることは、HTMLページに文字列の内容を動的に挿入するために使用される一般的に使用される手法です。

たとえば、HTMLファイルの本文でdocument.write("<p>holla</p>")を実行すると、ブラウザはHTMLファイルを受信すると次のことを行います。

  1. 文書を開いて書き込みます。
  2. ドキュメントへのhtmlコンテンツの書き込みを開始します。
    • JavaScriptエンジンは、document.write()を検出すると実行し、ドキュメント内のその特定の行に"<p>holla</p>"を書き込みます。これは、文字列がHTMLファイルの一部であるかのようにです。 document.write()はduringと呼ばれるhtmlファイルの解析なので、ページの一部として解析されるだけです。
  3. 文書を閉じて書き込みます。解析が完了しました。

それがdocument.write()の使い方だとしたら、驚きはありません。代わりに、document.write()afterを呼び出して、htmlが解析されます。

それで、あなたは何が起こるべきだと思いますか？

前に述べたように、に書き込む前に、ドキュメントを書き込むために開く必要があります。理論的には、既存のコンテンツに追加することも、単に上書きすることもできます。コンテンツに追加すると、新しい値が終了タグの後に表示されるため、最終的にinvalid html pageになります。したがって、より賢明な動作はコンテンツを上書きすることであり、それがまさに何が起こるかです。

20
linstantnoodles