JavaScript: document.write()

概略

document.write() は JavaScript の初期の時代からあった古い関数で、 関数の動作テストの出力などちょっとした用途に便利です。 ただし、問題点がいくつかあるため普通の Web や Web アプリケーションではあまり使用しません。

• MDN: Document.write()

document.write() を使わない文字列の出力方法は 他にもいろいろあります。

• JavaScript はじめの一歩 (2)
• JavaScript: HTML 要素にテキストを出力する
• JavaScript: テストプログラムの実行とソース表示

サンプル (2023/10)

• TestJS_document_write01.html
  document.write() のサンプル。
  

セキュリティに注意 (2023/10)

document.write() で安全性が確かでない文字列を処理すると セキュリティトラブルの原因になります。

◎ 安全性が確かでない文字列の例

・掲示板など不特定の人が入力した文字列。
・出典が定かでない任意のデータファイルのテキスト。

  など。

• TestJS_document_write_security01.html (2023/10)
  document.write() は引数に JavaScript のプログラムを含む文字列を渡すとプログラムが実行されます。

• 文字列中のタグのエスケープも面倒な話になります。
  タグの文字 <, > を &lt;, &gt; に置換しておけば大丈夫では？と思うかもしれませんが 単純な話ではないので注意。 文字を代替コードで置き換える方法はいくつもあります。 この話は innerHTML に HTML のタグを含む文字列をセットする場合でも同様です。
  

その他の問題点 (2023/10)

HTML の表示に時間がかかる場合がある

document.write() は HTML を読み込む途中ですぐに実行するので、 HTML の表示処理を一時的にブロックします。 このため HTML 表示までの時間が長くなります。

タグや JavaScript コードの並び順を気にする

HTML を読み込む途中で実行する処理では、 まだ読み込まれない HTML 要素を取り出したり JavaScript 関数を呼び出したりするとエラーになります。 このため HTML タグやプログラムコードを並べるときに 順序依存を気にする面倒な話が増えます。
JavaScript: プログラムを実行するタイミング

関連

• JavaScript はじめの一歩 (2)
• JavaScript: console.log() など
• JavaScript: HTML 要素にテキストを出力する
• JavaScript: プログラムを実行するタイミング