ホームページ >ウェブフロントエンド >jsチュートリアル >js_基礎知識のdocument.writeについて
js_基礎知識のdocument.writeについて
- WBOYオリジナル
- 2016-05-16 16:27:281611ブラウズ
ブラウザの出力ストリームは、ページが読み込まれた後に自動的に閉じられることに注意してください。この後、現在のページで動作する document.write() メソッドは新しい出力ストリームを開き、現在のページのコンテンツ (ソース ドキュメントの変数や値を含む) をクリアします。したがって、現在のページをスクリプトによって生成された HTML に置き換える場合は、HTML コンテンツを連結して変数に割り当て、document.write() メソッドを使用して書き込み操作を完了する必要があります。ドキュメントをクリアして新しいデータ ストリームを開く代わりに、1 回の document.write() 呼び出しですべてを行うことができます。
document.write() メソッドに関してもう 1 つ注意すべき点は、関連メソッド document.close() です。スクリプトがウィンドウ (このウィンドウであっても別のウィンドウであっても) へのコンテンツの書き込みが終了したら、出力ストリームを閉じる必要があります。遅延スクリプトの最後の document.write() メソッドの後に、 document.close() メソッドが含まれていることを確認する必要があります。そうしないと、イメージとフォームが表示されません。また、後続の document.write() メソッドの呼び出しでは、コンテンツがページに追加されるだけで、新しい値を書き込むために既存のコンテンツがクリアされることはありません。 document.write() メソッドをデモンストレーションするために、同じアプリケーションの 2 つのバージョンを提供します。 1 つはスクリプトを含むドキュメントに書き込み、もう 1 つは別のウィンドウに書き込みます。各ドキュメントをテキスト エディタに入力し、.html ファイル拡張子を付けて保存し、ブラウザでドキュメントを開いてください。
例 1 では、新しいドキュメント タイトルの HTML タグとタグの color 属性を含む、ドキュメントの新しい HTML コンテンツを組み立てるボタンを作成します。この例では、読者には馴染みのない演算子 = があります。これは、右側の文字列を左側の変数に追加します。この変数は、複数の別々のステートメントを簡単に結合できます。長い文字列。 newContent 変数で結合されたコンテンツを使用して、 document.write() ステートメントはすべての新しいコンテンツをドキュメントに書き込み、例 1 のコンテンツを完全にクリアできます。次に、 document.close() ステートメントを呼び出して出力ストリームを閉じる必要があります。ドキュメントがロードされてボタンをクリックすると、結果としてブラウザのタイトル バーのドキュメント タイトルが変化することに注目してください。元のドキュメントに戻ってボタンをもう一度クリックすると、動的に書き込まれた 2 ページ目が、元のドキュメントを再ロードするよりもさらに速く読み込まれることがわかります。
例 1 では、現在のウィンドウで document.write() を使用します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><title>Writing to Same Doc</title>
<script language="JavaScript">
function reWrite(){
// assemble content for new window
var newContent = "<html><head><title>A New Doc</title></head>"
newContent += "<body bgcolor='aqua'><h1>This document is brand new.</h1>"
newContent += "Click the Back button to see original document."
newContent += "</body></html>"
// write HTML to new window document
document.write(newContent)
document.close() // close layout stream
}
</script>
</head>
<body>
<form>
<input type="button" value="Replace Content" onClick="reWrite()">
</form>
</body>
</html>
例 2 では、スクリプトによって生成されたドキュメント全体が書き込まれるサブウィンドウがスクリプトによって作成されるため、状況は少し複雑です。両方の関数で新しいウィンドウへの参照をアクティブに保つために、newWindow 変数をグローバル変数として宣言します。ページがロードされると、onLoad イベント ハンドラーは makeNewWindow() 関数を呼び出し、空の子ウィンドウを生成します。さらに、window.open() メソッドの 3 番目のパラメータに属性を追加して、子ウィンドウのステータス バーを表示します。
ページ上のボタンは subWrite() メソッドを呼び出します。最初に実行されるタスクは、サブウィンドウのクローズド属性をチェックすることです。このプロパティ (新しいブラウザ バージョンにのみ存在) は、参照ウィンドウが閉じている場合に true を返します。この場合 (ユーザーがウィンドウを手動で閉じた場合)、関数は makeNewWindow() を再度呼び出して、そのウィンドウを再度開きます。
ウィンドウが開かれた後、新しいコンテンツは文字列変数として結合されます。例 1 と同様に、コンテンツは一度書き込まれ (ただし、これは別のウィンドウには必要ありません)、その後 close() メソッドが呼び出されます。ただし、重要な違いに注意してください。write() メソッドと close() メソッドはどちらも子ウィンドウを明示的に指定します。
例 2 別のウィンドウで document.write() を使用する
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><title>Writing to Subwindow</title>
<script language="JavaScript">
var newWindow
function makeNewWindow(){
newWindow = window.open("","","status,height=200,width=300")
}
function subWrite(){
// make new window if someone has closed it
if(newWindow.closed){
makeNewWindow()
}
// bring subwindow to front
newWindow.focus()
// assemble content for new window
var newContent = "<html><head><title>A New Doc</title></head>"
newContent += "<body bgcolor='coral'><h1>This document is brand new.</h1>"
newContent += "</body></html>"
// write HTML to new window document
newWindow.document.write(newContent)
newWindow.document.close() // close layout stream
}
</script>
</head>
<body onLoad="makeNewWindow()">
<form>
<input type="button" value="Write to Subwindow" onClick="subWrite()">
</form>
</body>
</html>