機能 ショートカットキー
リファレンス(参考URL)一覧へ移動 R
記事URLをMarkDownとしてコピー Ctrl+M
前のコードタグへ移動 Ctrl+←
次のコードタグへ移動 Ctrl+→
ヘルプを表示・非表示 H
Tips
- ショートカットキーは記事上で有効です。ヘッダー/フッター付近では機能しないことがあります。
- コードタグ移動機能がうまく動かないときは、Shift+F5でページを更新してみてください。
- このウィンドウを閉じるには、Hキーをもう一度押してください

JavaScriptをHTMLが読み込まれたら実行する/ウェブページが完全に読み込まれたら実行する

プログラミング

DOMContentLoadedがHTML、onloadがウェブページ全体です。

JavaScriptでは、addEventListenerでイベントを指定してやります。

以下コードで検証してみればわかりますが、当然、DOMContentLoadedが先に出力されます。
というか、ウェブサイトによっては、いくら待ってもDOMContentLoadedが出力されない場合もあります。
僕のWordPressブログなんかもそうですし、Youtubeなんかもそうでした。

puts "nothing" ; 
puts "ruby" ; 
puts "lang-ruby" ; 
//# dev
document.addEventListener("load", function() {
   // 実行したい処理
   console.log('loaded.')
});

document.addEventListener("DOMContentLoaded", function() {
   // 実行したい処理
   console.log('DOMContentLoaded.')
});

なので新しいサイトで開発を始める前には、onloadは動かないものとして、もし使うなら、必ず上記コードで検証してからのほうが良いかと思います。

この記事で欲しい情報が見つからなかった方へ

この記事の更新情報がある場合があります。
この記事は以下の記事とも関連性があると思われます。

JavaScriptの正規表現マッチでグループマッチを取り出すには
ISO-8601 のデータフォーマットでJavaScriptで時刻を出力するには
JavaScriptでURLエスケープ
JavascriptでHTTP GET
JavaScript 非表示パスワードを表示する ブックマークレット
URLからクエリストリングを削除するJavaScriptを書いた
Webページのリダイレクト速度比較 HTML vs JavaScript vs .htaccess


管理人の方針で、既存の記事の編集はせず、新しい情報や大きな既存情報の更新があった場合には、新しい記事として公開することになっています。
当記事で欲しい情報が見つからなかった・解決に至らなかった場合、これらのリンクがお役に立てるかも知れません。

どうやってこの関連記事を生成しているの?
この機能のPHPソースコード(2500行)

コメントを残す

Close Menu