JS での document.write() の使用法 (詳細なチュートリアル)
この記事では、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 サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7708
15
1640
14
1394
52
1288
25
1232
29
消去された閲覧履歴を復元する方法
Feb 18, 2024 pm 10:05 PM
Web ページの履歴が消去された後に復元する方法 日付: 2022 年 6 月 10 日 はじめに: 私たちはコンピューターやモバイルのブラウザーを毎日使用するときに、ブラウザーの履歴を使用して、以前にアクセスした Web ページを見つけることがよくあります。ただし、場合によっては、ブラウザの履歴を誤って消去してしまい、特定の Web ページを取得できなくなる場合があります。この記事では、消去されたウェブ履歴を復元するいくつかの方法を説明します。方法 1: ブラウザの復元機能を使用する Google などのほとんどの一般的なブラウザには履歴を復元する機能が備わっています。
Weibo のコンテンツをクリアする方法_Weibo のコンテンツをクリアするチュートリアル
Mar 30, 2024 pm 05:51 PM
1. まずWeibo APPを開き、右下隅にある「My」をクリックします。 2. 次に、パーソナル センター インターフェイスに入り、左上隅の Weibo をクリックします。 3. 最後に、Weibo メッセージを 1 つずつ入力して削除します。
KB4532693 アップデート後のデスクトップの損失に対処するにはどうすればよいですか?
Dec 27, 2023 am 11:41 AM
win10 オペレーティング システムを搭載したコンピューターを使用している場合、問題が発生した場合、システム パッチを更新することを選択することがあります。したがって、KB4532693 更新プログラムのインストール後にデスクトップが消去される状況については、編集者は、新しいパッチが十分に安定していない可能性があるため、使用時に問題が発生する可能性があると考えています。まずパッチをアンインストールしてみてください。エディターがどのように実行したかを確認するために詳細な手順を見てみましょう~ KB4532693 アップデート後にデスクトップがクリアされた場合はどうすればよいですか? 1. Microsoft は 2 月 11 日に Windows 10 KB4532693 セキュリティ パッチのプッシュを開始します。番号は 18363.657 に更新されますが、最近一部のネチズンが 3 を発見しました。この更新プログラムをインストールすると、新たなシステムの問題が発生します。Wind
Weibo の下書きボックスをクリアする方法_Weibo の下書きボックスをクリアするチュートリアル
Mar 30, 2024 pm 08:31 PM
1. Sina Weibo アプリを開き、右下隅に「Me」と入力します。 2. 入力後、ページ上部に下書きボックスが表示されるので、クリックして開きます。 3. 入力後、削除したい下書き作品を長押しすると、[下書きを削除]と[下書きボックスをクリア]の2つの選択肢が表示されます。 4. [下書きボックスをクリア]をクリックします。
Chalk アプリで出題された質問をクリアする方法 Chalk アプリで出題された質問をクリアする方法
Mar 12, 2024 pm 01:43 PM
Chalk アプリで出題された問題をクリアするにはどうすればよいですか? Chalk アプリは、ユーザーが直接質問できるソフトウェアです。このソフトウェアには、多くのビデオ レッスンや配布資料もあります。ユーザーは、Wi-Fi があるときに必要なビデオや配布資料をダウンロードすることを選択できるため、消費せずに視聴できますバスの待ち時間やバスの中でデータを取得できます。一部のユーザーは、これに関していくつかの質問を行った後、質問記録をクリアしたいと考えています。以下のエディターに質問記録をクリアするための方法がまとめられていますので、参考にしてください。 Chalk アプリの既設問題をクリアするにはどうすればよいですか? Chalk アプリおよび Web ページには既設問題をクリアする機能がありません。既設問題をやり直したい場合は、新しいアカウントを登録して使用する必要があります。 。 Chalk APPでは、すべて
誤ってごみ箱を空にしてしまった場合にファイルを復元する方法
Feb 21, 2024 pm 06:45 PM
誤ってごみ箱を空にした後にファイルを回復する方法 コンピューター上でファイルを使用するとき、誤ってごみ箱を空にして重要なファイルが削除されるなど、予期せぬ状況に遭遇することがよくあります。このとき、多くの人はパニックを感じ、削除されたファイルをどのように復元すればよいか疑問に思うかもしれません。しかし実際には、適切な方法とツールの助けを借りて、これらの重要なファイルを回復するチャンスはまだあります。この記事では、誤って空にしてしまったごみ箱内のファイルを回復するのに役立ついくつかの方法とツールを紹介します。まず第一に、私たちが理解する必要があるのは、
(空でない部分文字列を削除して) バイナリ文字列を空にした後、ゼロの数が最も少ないプレーヤーを検索します。
Sep 16, 2023 am 10:21 AM
この記事では、文字列操作とゲーム理論の分野に関連する興味深い問題について説明します。「空ではない部分文字列を削除してバイナリ文字列を空にし、残りのゼロが最も少ないプレイヤーを見つける」です。この質問では、競技ゲームでのバイナリ文字列の使用の概念について説明します。私たちの目標は、ゲーム終了時に残っている 0 が最も少ないプレイヤーを見つけることです。この問題について説明し、C++ コードの実装を示し、例を通して概念を説明します。問題文を理解する 2 人のプレーヤーにバイナリ文字列が与えられ、交代でゲームをプレイします。各ターンで、プレイヤーは少なくとも 1 つの「1」を含む空でない部分文字列を削除します。文字列が空になるか、文字列に「1」がなくなるとゲームは終了します。アクションを起こせないプレイヤーはゲームに負けます。課題は最後の 0 を見つけることです
QQメールボックス内の削除された電子メールレコードをクリアする方法
Mar 20, 2024 pm 09:26 PM
毎日の電子メールの送受信に重要なツールとして、QQ メールボックスは便利なコミュニケーション手段を提供します。日常の使用では、既読メールやスパムメールを削除するのが一般的ですが、単純な削除では完全に削除できないため、スペースを節約し、メールボックスを整理しておくために、削除したメールを空にするのは良い習慣です。したがって、これらのメールを完全に削除したいユーザーは、この記事に従って詳細を確認してください。 QQ メールボックスで削除されたメールをクリアする方法 1. まず、クリックして QQ メールボックスを開き、ページを下にスクロールして、削除されたオプションを見つけます。 2. 次に、クリックしてページに入り、右上隅にある編集ボタンを選択します。 3. 次に、下部に表示されるオプションから「クリア」を選択します。 4. 最後に確認して「Clear 1」をクリックします。
