GoogleSiteSearchを設置したページでIEの時だけうまく表示されないことがある

2014年6月11日

表題の件の通りのことが起きました

報告があったのはIE10と8で起きるということでした。
開発者ツールのコンソールでは

‘google’ は定義されていません

と表示されて画面が真っ白になるという状況。

真っ白な画面のソースを調べてみると

<script defer onreadystatechange=’google.loader.domReady()’ src=//:></script>

というjavascriptが1行あるだけ。
なんでそうなっているのか分からないけれど、googleが定義されてないからエラーが出たのはなんとなく分かる。

Googleで色々検索してみました

日本語で関係ありそうなページは見つからなかった。
「GoogleSiteSearch」で検索すると5件目くらいに吉祥寺北口システムの記事が出てくるくらいに何にも情報が無いので仕方がないことではある。
技術系ではよくあることなのだけど、stackoverflowにこれかなぁというのがあった。世界は広い。

Why is my website a blank screen in IE? (Including IE9!)
http://stackoverflow.com/questions/12028652/why-is-my-website-a-blank-screen-in-ie-including-ie9

報告されている現象は同じ。Answerに

From what I remember, IE does weird things when you try to access elements on the page that haven’t been fully parsed yet.

という説明がある。
IEのjavascriptの実行がマークアップ完了する前に動いてしまう、らしい。
ならば思い切ってIEの時だけはタイマーをかけて検索処理の実行を遅らせてみた。

こんな感じ

var ua = window.navigator.userAgent.toLowerCase();
if (ua.indexOf('msie') != -1) {
  $(document).ready(function(){
    setTimeout( function() {
ここにGoogleSiteSearchのコードを書く
    }, 5000);
  });
}else{
IEじゃない場合はここにGoogleSiteSearchのコードを書く
}

タイマーの5000(5秒)は適当な数字。もっと短くても大丈夫かも知れない。

結果、動きました

これで現象はとりあえず起きなくなった。元々謎の挙動なので、本当に全く起きなくなったのかは分からないけれど、繰り返し確認しても大丈夫になったようだ。
もちろん、タイマーが動く分だけ検索表示は待たされるので、実用的かどうかという面はある。本来ならばしなくて良い待機時間なので。