jquery ページ読み込み（完了）時に実行するjavascript

CATEGORY: jQuery

2013年6月13日

JavaScript で DOM 要素の取得など、ブラウザがホームページの読み込み完了時に何らかの処理を行いたい場合、body の閉じタグの直前に記述するか window.onload=function()～ を使用する。

最近は、jQuery ばかりを使っていて（というか、「jQuery(function($){」の意味など忘れていて） JavaScript で要素を操作することがなかったので、すっかり忘れていたのでメモ。

以下のような場合、p 要素を読み込む前に実行されるので、「contact」は「null」になり、思ったとおりには表示されない。

<pre>
<script type="text/javascript">
<!--
  var contact = document.getElementById('contact');
  contact.innerHTML = '<a href="xxx">contact</a>';
// -->
</script>
</pre>

<body>
<p id="contact"></p>
</body>

これに対処するには、

  • body の閉じタグの直前に記述する。（要素の読み込みより後に記述する）
  • window.onload=function()～ を使用する。
  • body 要素に onload 属性を追加する。<body onload=”処理”>
<body>
<p id="contact"></p>

<pre>
<script type="text/javascript">
<!--
  var contact = document.getElementById('contact');
  contact.innerHTML = '<a href="xxx">contact</a>';
// -->
</script>
</pre>
</body>

window.onload を利用する場合。

<body>
<pre>
<script type="text/javascript">
<!--
window.onload=function(){
  var contact = document.getElementById('contact');
  contact.innerHTML = '<a href="xxx">contact</a>';
}

// -->
</script>
</pre>
<p id="contact"></p>
</body>