JavaScriptの document.getElementById() でnullが帰る対処

JavaScriptの document.getElementById() でnullが帰る対処

とあるスクリプトで最初の実行時には正常に動作するのだけれど、同一ページを再訪問(リロードではなく)した時に不具合が出た。

webkit系のブラウザで不具合が確認できたのだけれど、どうやらgetElementById()でnullが帰っている様子。

ググってみると同じような現象で悩んでいる人もいるみたい。DOM構築前だとnullが帰る事もあるのが原因のようだ。

onLoadイベントとかはjQuery使っているのなら簡単に実装できるのだけれど、純粋JSで書いているスクリプトだし、他所様に配信するスクリプトなので解決方法を探る。

jQuery使っているのなら、$.ready(function(){...}) でいいのだろうけど、そうはいかない。じゃあ、onLoadイベントに登録すればいい。いいのだけど、onLoadイベントは1つしか実行できないので工夫が必要になる。

  • Javascript onloadが複数ある場合の対処法 ~FancyZoomとCubeブログシールを共存させる : ブログ・カスタマイズ徒然記
  • ここら辺の記事を参考に How to use multiple window.onload events with external scripts - Javascript FAQ - Tek-Tips にある addOnloadEvent を組み込んで対処する。

    処理的には document.write() でかいたHTML中にあるIDが付いたタグの中に別処理で作成したHTMLを放り込むもの。

    実行したい関数には引数を指定しているので、
    addOnloadEvent(function(){ print_image(hoge,fuga) });
    みたいな感じにすればonLoadイベントとして実行してくれる。

    そうすることで、getElementById()でnullが帰らなくなる。