ホームページ > 記事 > ウェブフロントエンド > JS での document.write() の使用法 (詳細なチュートリアル)
JS での document.write() の使用法 (詳細なチュートリアル)
- 亚连オリジナル
- 2018-06-22 17:17:138586ブラウズ
この記事では、JS での document.write() の使用法と、クリアする理由の簡単な分析を主に紹介します。必要な友人はそれを参照してください。
おそらく、多くの友人が document を使用してそのような状況に遭遇したことがあります。 write() 関数がコンテンツを Web ページに書き込むと、ドキュメント内の元のコンテンツが消去されます。これは初心者にとって問題です。なぜこれが起こるのか、そしてもちろんそれを回避する方法を紹介します。
まずコード例を見てみましょう:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>Document</title>
<script type="text/javascript">
window.onload=function(){
document.write("重温 JavaScript");
}
</script>
</head>
<body>
<p>Hello JavaScript</p>
</body>
</html>上記のコードから、document.write() 関数が元のドキュメントのコンテンツをクリアしていることがわかります。以下は、この状況の理由の概要です。 window.onload イベントが発生しています。 ドキュメントのコンテンツが完全にロードされた後、イベント処理関数を実行します。 もちろん、この時点で document.writ() 関数を実行すると、 document.open( が自動的に呼び出されます。 ) 関数を使用して、新しいドキュメント ストリームを作成し、新しいコンテンツを書き込み、ブラウザを通じて表示されます。これにより、元のコンテンツが上書きされます。しかし、多くの友人は、なぜ次の状況で元の Web ページのコンテンツが上書きされないのかという疑問を抱いています。コードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>Document</title>
<script type="text/javascript">
document.write("重温 JavaScript");
</script>
</head>
<body>
<p>Hello JavaScript</p>
</body>
</html>上記のコードでは、元のドキュメントのコンテンツはクリアされていません。これは、現在のドキュメント ストリームがブラウザによって作成され、その中に document.wirte() 関数が存在するためです。つまり、この関数の実行時にドキュメント ストリームは閉じられません。現時点では、新しいドキュメント ストリームを作成するために呼び出されます。そのため、これについては説明しません。一部の友人は、なぜ次のメソッドがまだ機能しないのかを尋ねるかもしれません。コードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>Document</title>
<script type="text/javascript">
document.close();
document.write("重温 JavaScript");
</script>
</head>
<body>
<p>Hello JavaScript</p>
</body>
</html>上記の document.close() を使用してドキュメント フローが閉じられているのに、残念ながら、元のコンテンツはなぜ上書きできないのですか?フローはブラウザによって制御され、許可なく手動で作成および閉じられるため、 document.close() 関数は document.open() 関数によって作成されたドキュメント ストリームのみを閉じることができます。次のコード例を見てください:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>Document</title>
<script type="text/javascript">
function create(){
var newWindow=window.open("","Document","_blank");
newWindow.document.write("Hello JavaScript");
newWindow.document.close();
newWindow.document.write("覆盖后的输出");
}
window.onload=function(){
var obt=document.getElementById("bt");
obt.onclick=function(){
create();
}
}
</script>
</head>
<body>
<p id="print">Hello JavaScript</p>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>document.open() によって作成されたドキュメント ストリームは document.close() によって閉じることができ、2 番目の document.write() によって出力されたコンテンツは最初の document.write() によって出力されたコンテンツを上書きします。 。
外部 JavaScript を非同期で参照する場合は、最初に document.open() を実行してドキュメントをクリアし、次に document.write() を実行する必要があります。パラメーターは本文コンテンツの先頭に書き込まれます。
最初に document.open() を実行せずに document.write() を直接実行すると無効になり、Chrome に次のプロンプトが表示されます:
// asyncWrite.js document.open(); document.write('<p>test</p>'); document.close(); <!-- asyncWrite.html --> <!-- 运行前 --> <body> <script src="asyncWrite.js" async></script> </body> <!-- 运行后 --> <body> <p>test</p> </body>
Document.write() はスクリプトタグを含む文字列を書き込むこともできます. しかし、それは逃れる必要があります。 scriptタグに記述した内容は正常に動作します。 <!-- 运行前 -->
<script>
document.write('<script>document.write("<p>test</p>");<\/script>');
</script>
<!-- 运行后 -->
<script>
document.write('<script>document.write("<p>test</p>");<\/script>');
</script>
<script>document.write("<p>test</p>");</script>
<p>test</p>document.write() は複数のパラメータを渡すことができます。
rreee以上が皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。
関連記事:
Angularスコープでスコープを使用する方法angularjsで棒グラフの動的読み込みを実装する方法Vueのレスポンシブ原則について(詳細なチュートリアル)以上がJS での document.write() の使用法 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。