5

write メソッドと onload イベントを試しています。これが私のコードです：

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body onload="document.write('body loaded!')">
        <h1>Hello World!</h1>
        <img onload="document.write('img loadeld!')" src="smiley.gif" alt="Smiley face" width="42" height="42" />
    </body>
</html>

これをブラウザで実行すると、「img loadeld」が出力され、「ハング」するだけで、ページが無限にロードされているようです。ブラウザが「img loadeld」を出力し、body要素の準備が整うと「body loaded」と通常どおり停止することを期待していました。

私の質問:

  1. なぜそのようなハングがあるのですか？img 要素の onload イベントがブラウザの継続と「ロードされた本文」のレンダリングをブロックするのはなぜですか?
  2. img 要素から onload ハンドラーを削除すると、応答が期待どおりになるのはなぜですか - 「本文が読み込まれました」とページがブロックされません。
4

5 に答える 5

3

すべてが正常に機能しており (期待どおりではありません)、「ハング」または「ブロック」しているものはありません。しかし、それはすべて非常に速く起こっているため、そのようには見えません。ドキュメントへの書き込みの仕組みとイベントの順序の説明が役立つことを願っています。

IMG onload イベントは、ドキュメントが閉じられた (ドキュメントの準備が整った) 後に発生します。

document.write()ただし、開いているドキュメントにのみ出力できます。

ドキュメントが閉じられている場合、document.write()( docs ) は暗黙的にdocument.open()( docs ) を呼び出し、ドキュメント全体を消去します。thenへの呼び出しは、指定しwriteた内容を出力します。ドキュメントは、明示的に閉じられる ( document.close()( docs )) まで開いたままになるため、「読み込みスピナー」は表示され続けます。

実行されている操作の基本的なフローは次のとおりです (すべてが起こっていることに気付かず、物事が壊れているように見えるほど速い)。

  1. ページリクエストが行われました
  2. ページの応答を受け取りました
  3. ドキュメントが開かれ、コンテンツが解析され、最初のものを含めて配置されdocument.writeます (ドキュメントは現在開いているため、open を呼び出す必要はありません)
  4. ドキュメントを閉じます
  5. IMG タグの取得が完了し、イベントが発火する
  6. イベント ハンドラの呼び出しdocument.write
  7. ドキュメントが暗黙的に再度開かれる (新しいドキュメントが作成され、すべてのコンテンツが失われ、読み込み中のスピナーが表示される)
  8. への引数がdocument.write()新しいドキュメントに出力されます
  9. すべてが完了しましたが、ドキュメントはまだ開いています

すべてを上書きせずに既存のコンテンツを変更する代わりに、 DOM 操作技術 ( appendChild()、 への書き込みinnerHTMLなど) を使用する必要があります。document.write

これに関する良いニュースは、これが起こっているので、イメージが正常にロードされていることを知っているということです. 私が先に逃したように、あなたはそれに反応する正しい方法を考え出さなければなりません.

于 2012-09-11T18:58:47.623 に答える
3

簡単に言えば、 DOM の準備ができdocument.write() た後に呼び出すと、既存の DOM が上書きされます。

于 2012-09-11T18:56:42.467 に答える
0

html がロードされた後に関数内で使用されると、新しいhtml ドキュメントdocument.writeに書き込みます。onload はイベント ハンドラーなので、= . ページの読み込みをブロックするのではなく、新しい空白の HTML ドキュメントを作成するだけです。<img onload="document.write('img loadeld!')"/>img.onload = function(event){document.write('img loadeld!');}

于 2012-09-11T18:56:14.823 に答える
0

これdocument.write()は、ドキュメント全体をクリアしてからページに引数を書き込み、本文に追加しようとするが、本当に必要document.writeln('Img loaded');なものに固執するためです。

<img onload="document.body.innerHTML += '<h1>Loaded</h1>'"'

または、要素を作成して を使用する関数を作成しますdocument.body.appendChild(elem)。この場合document.body、任意のブロック要素に置き換えることができます

于 2012-09-11T18:56:34.473 に答える
0

DIV などのメッセージ コンテナーを作成し、innerHTML.write() を使用しないように設定します。

于 2012-09-11T18:56:36.693 に答える