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

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

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

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

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

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

ここら辺の記事を参考に 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が帰らなくなる。