JavaScriptを読み込みが完了してから実行

11/27/2019

始めに

JavaScriptを読み込みが完了してから読み込むことは大切です。

なぜなら、JavaScriptは「読み込まれているところ」までのHTMLを使用可能だからです。

読み込みが完了してから実行する方法

まず、このようなページがあるとします。

<html>
 <head>
  <title>サンプル</title>
 </head>
 <body>
  <span id="sample">JS未変更</span>
 </body>
</html>

方法1:HTMLの最後で実行

このような感じになります。

<html>
 <head>
  <title>サンプル</title>
 </head>
 <body>
  <span id="sample">JS未変更</span>
  <script>
  document.getElemntById("sample").innerHTML="JS変更済み";
  </script>
 </body>
</html>

取得したい要素より下に記述することによりエラーなく実行することが可能です。

方法2:ブラウザのイベントを使用

この方法であれば、HTMLのheadで固定のスクリプトでも使うことができます。

<html>
 <head>
  <script>
  window.onload = function () {
  document.getElemntById("sample").innerHTML="JS変更済み";
  };
  </script>
  <title>サンプル</title>
 </head>
 <body>
  <span id="sample">JS未変更</span>
 </body>
</html>

window.onloadを利用することで、読み込み完了後に処理を実行することができます。

window.onloadでもエラーが出る場合

何らかの理由で取得する要素が読み込みが終わった直後に読み込まれる仕様のせいで読み込まれない場合は、次のようにすると読み込まれるはずです。

<html>
 <head>
  <script>
  window.onload = function () {
   setTimeout(function(){
    document.getElemntById("sample").innerHTML="JS変更済み";
   },100);
  };
  </script>
  <title>サンプル</title>
 </head>
 <body>
  <span id="sample">JS未変更</span>
 </body>
</html>

setTimeoutを利用し、0.1秒の差を生まれさせています。
ホントにJSの処理が遅いブラウザでなければ大丈夫だとは思いますが、それでもできない場合は100を200や250など待ち時間を増やしてください。

最後に

JSはプログラムが間違っていない場合でもエラーが発生する場合があるため、注意が必要です。

予期せぬことでエラーが発生するのでエラーが発生するときの様子を目で見ることで解決につながることもあります。

このブログを検索

Kore! Ene!

スポンサー