JavaScript_EventHandlers_window.onload の履歴(No.1)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• JavaScript_EventHandlers_window.onload へ行く。
  • 1 (2019-08-10 (土) 10:01:23)

JavaScript_EventHandlers ＞ window.onload

window.onloadとは？†

WebページのHTMLの読み込みが完了したときに実行されるイベントハンドラーです。

書式†

• window.onload - Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/onload

window の load イベントに対応するイベントハンドラです。

構文

window.onload = funcRef;

funcRef : load イベント発生時に呼び出す関数への参照または関数式

サンプルコード†

• JavaScript - 「window.onload」の使い方がまだよくわかりません｜teratail https://teratail.com/questions/54309

「window.onload」という命令文？がどういう場面で使うのかと疑問に思いました。

#code(html){{

!DOCTYPE html>

html>

head>

   <meta charset="UTF-8">
   <script>
       window.onload = function () {
           var str = "";
           var day = new Date().getDay();
           switch (day) {
               case 0:
                   str = "日"; break;
               case 1:
                   str = "月"; break;
               case 2:
                   str = "火"; break;
               case 3:
                   str = "水"; break;
               case 4:
                   str = "木"; break;
               case 5:
                   str = "金"; break;
               case 6:
                   str = "土"; break;
           }
           document.getElementById("day").textContent = str;
       }
   </script>

/head>

body>

   <h1>今日は<span id="day"></span>曜日</h1>

/body>

/html>
}}

HTMLは上から順に処理されていきます。
headの中にスクリプト書くと、headが読まれる時点でスクリプトが実行されます。
その時点ではまだbodyは存在しないので、

document.getElementById("day").textContent = str;

を実行するとエラーになります。
その後で、bodyが解釈されて「今日は曜日」と表示されます。

window.onload = function()～～～

と書くことで、headの解釈時点で、「htmlの解釈が全部終わってページが表示されてからfunctionを実行する」というのを予約することになります。
この場合、functionの中身が実行される時点ですでに「今日は曜日」と表示されているので、

document.getElementById("day").textContent = str;

が成功します。

window.onloadの欠点＝実行が遅いこと†

• HTMLの読み込みが完了してから実行 - Qiita https://qiita.com/cervomansan/items/0873026853686503fc3a

ブラウザは上から順番に実行する。<script>タグを見つけたら優先的に実行しようとするので書き方によってはHTMLの要素が作られる前にJavaScriptを実行してしまうのでエラーになる場合がある。
そこでwindow.onloadと書くことでHTMLの読み込みが完了してから実行される。

コメント　alucky0707　2014-07-15 16:26

window.onload = function () {
  // ここに読み込み完了時に実行してほしい内容を書く。
};

という方法が考えられますが、このwindow.onloadという方法は今となっては少し古い方法になりますし、これはHTML 文書（≒画像などの読み込みも含む）が読み終わったところで実行されるので、実行のタイミングが予想よりも遅くなってしまう可能性があり、あまり良い方法とは言えないでしょう。

window.onloadの改善策（代替案）†

• デザイン案で window.onload を利用してはいけない理由 – Kaizen Platform ヘルプセンター

window.onload の処理には「予約」と「実行」の2工程あり、ブラウザのイベント発火タイミングで工程が切り替わります。
以下、図のように「予約」がブラウザのイベント発火タイミングに間に合わない場合、「実行」が行われません。

元ページの処理が多かったり、PCやスマホの処理速度が遅かったり、ネットワーク回線速度が遅かったり、様々な原因でデザイン案の反映がブラウザのイベント発火タイミングに間に合わないことがあります。
イベント発火タイミングに間に合いませんと、 onload 内で実行するはずだったJSが実行されず、デザイン崩れや動作不具合の原因となります。
上記の理由から window.load をデザイン案で利用することはご遠慮ください。

HTML読込完了のイベント発生の代わりに、HTML要素の出現を常時監視する方法†

''解決法'
setIntervalを利用し、n秒ごとに、該当の要素があるかを確認、要素が読み込まれた時に処理をするようにしてください。
例)
例えば <a class="link" href="○○">リンク</a> という要素があり、そこに変更を加えたいが、リンクがページ内のスクリプトなどで非同期的に挿入されている場合、デザイン案反映時には存在しておらず、意図したように変更を加えられない場合があります。
そういった場合は、以下のようなコードで、要素の出現を監視しましょう。

#code(javascript){{
var timerId = setInterval(findTargetElement, 300);

function findTargetElement(){

  var elem = $("a.link");
  if(elem.length > 0){
    //処理を書く
    clearInterval(timerId);
  }

}
}}