window.onload またはスクリプトブロックを使用する必要がありますか?

https://stackoverflow.com/questions/40966

09-06-2019
|

質問

呼び出されたときに DOM を操作する (CSS クラスの追加など) JavaScript 関数があります。これは、ユーザーがフォーム内の一部の値を変更したときに呼び出されます。ドキュメントが最初にロードされるときに、この関数を呼び出して初期状態を準備します (この場合、サーバー側から DOM を正しい初期状態に設定するよりも簡単です)。

この機能を実行するには window.onload を使用する方が良いでしょうか、それとも変更する必要がある DOM 要素の後にスクリプトブロックを使用する方が良いでしょうか?どちらの場合でも、なぜその方が良いのでしょうか?

例えば：

function updateDOM(id) {
    // updates the id element based on form state
}

次の方法で呼び出す必要がありますか?

window.onload = function() { updateDOM("myElement"); };

または：

<div id="myElement">...</div>
<script language="javascript">
    updateDOM("myElement");
</script>

前者はそれを行う標準的な方法のようですが、後者はスクリプトがヒットするとすぐに要素を更新し、要素の後に配置されている限り、要素を更新するため、後者も同様に優れているようです。それは問題ないと思います。

何かご意見は？本当に一方のバージョンがもう一方のバージョンよりも優れているのでしょうか?

解決

必ず使用してください onload. 。スクリプトをページから切り離しておくと、後でスクリプトを解こうとして気が狂ってしまうことになります。

他のヒント

onload イベントはこれを実行する適切な方法であると考えられていますが、JavaScript ライブラリを使用しても構わない場合は、jQuery の $(document).ready() の方がさらに優れています。

$(document).ready(function(){
  // manipulate the DOM all you want here
});

利点は次のとおりです。

実行する追加コードを登録したいだけ $(document).ready() を呼び出します。window.onload を設定できるのは 1 回だけです。
$(document).ready() アクションは DOM が完了するとすぐに発生します。window.onload は画像などを待つ必要があります。

「JavaScript の質問ごとに jQuery を提案する男」にならないことを祈りますが、これは本当に素晴らしいことです。

私は Javascript をたくさん書いてきましたが、window.onload は ひどい それを行う方法。それは脆くて待つまで毎ページのアセットがロードされました。したがって、1 つの画像に永遠に時間がかかる場合、またはリソースが 30 秒までタイムアウトしない場合、ユーザーがページを表示/操作できるようになるまでコードは実行されません。

また、JavaScript の別の部分が window.onload = function() {} を使用することを決定した場合、コードは吹き飛ばされてしまいます。

ページの準備ができたときにコードを実行する適切な方法は、変更する必要がある要素が準備ができて利用可能になるまで待つことです。多くの JS ライブラリにはこれが組み込み機能として含まれています。

チェックアウト：

一部の JavaScript フレームワーク (次のような) ムーツール, を使用すると、「domready」という名前の特別なイベントにアクセスできます。

DOM がロードされたときに実行されるウィンドウイベント「domready」が含まれています。DOM 要素にアクセスしようとするコードが実行されるときに DOM 要素が確実に存在するようにするには、DOM 要素を「domready」イベント内に配置する必要があります。
window.addEvent('domready', function() {
  alert("The DOM is ready.");
});

IE の window.onload もバイナリ情報がロードされるのを待ちます。これは、「DOM がロードされたとき」の厳密な定義ではありません。そのため、ページが読み込まれたと認識されてからスクリプトが起動されるまでの間に、大幅な遅れが生じる可能性があります。このため、面倒な作業を処理してくれる豊富な JS フレームワーク (プロトタイプ/jQuery) の 1 つを検討することをお勧めします。

このトピックに関する非常に優れた記事は次のとおりです。

http://mattberseth.com/blog/2008/08/when_is_it_safe_to_modify_the.html

@ギーク

ユーザーが IE で戻るボタンを押したときに window.onload が再度呼び出されるのは確実ですが、Firefox では再度呼び出されません。(最近変更されない限り)。

Firefoxでは、 onload ページへの移動方法に関係なく、DOM の読み込みが完了すると呼び出されます。

クリーンなコードのために可能であれば window.onload を使用するという他の意見には同意しますが、ユーザーが IE で戻るボタンを押したときに window.onload が再度呼び出されるのは確実ですが、Firefox では再度呼び出されないでしょう。(最近変更されない限り)。

編集：それを逆にすることもできます。

場合によっては、ユーザーが別のページから戻るボタンを押して自分のページに戻ったときにスクリプトが評価されるようにする場合、インラインスクリプトの使用が必要になります。

この回答に対する修正や追加は大歓迎です...私は JavaScript の専門家ではありません。

私の見解は前者です。なぜなら、 window.onload 関数は 1 つしか持てないのに対し、インラインスクリプトブロックには 1 つの関数があるからです。 n 番号。

onLoad を使用するのは、実行される可能性のあるスクリプトタグを探して HTML を読み進めるよりも、ページの読み込み時にどのコードが実行されるかを判断する方がはるかに簡単だからです。

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow

window.onload またはスクリプト ブロックを使用する必要がありますか?

window.onload またはスクリプトブロックを使用する必要がありますか?