Program
iframe先のページが404でないか判定する方法 (javascript)
こんばんは、ころすけ(@wg_koro)です。
諸々の理由で、iframe先のページが生きているのか死んでいるのか(404など)、判定しなくてはならなくなりました。
さてどうしよう。iframeは404でもonload走るし、ステータスコード取れないし・・・。
そうだ、postMessage使おう
というわけで、たどり着いたのがpostMessageを使う方法。iframe先が自分のページであることが前提になりますが、こいつを使えばどうにかなる。
あ、「postMessage」はiframeを使って、異なるページ間でメッセージ(文字列)を送受信する仕組みです。クロスドメインであってもOK。IE以外はもちろんのこと、IEも8以上で対応しています。割と広いブラウザで使える技術です。
ページ作って試してみた。
iframe先が生きているかのテスト
上記のページを表示して「iframe先は生きてるよ！」というアラートが出れば、iframe先が生存していることを確認できています。
中身
やっていることは至極簡単。
- iframe先の子ページで、読み込みと同時に親ウィンドウにメッセージを送る。
- 親ページは、子ページからメッセージを受け取るとアラート表示
「子ページが404などで死んでいたら、メッセージが送られてこないので死んでいると判定する」というロジックです。
実際はアラートを表示させるのではなくフラグをセット。iframeのonload後、一定時間待ってもフラグがONになっていなければ死亡判定…という使い方になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
// 子ウィンドウであった場合は親へメッセージ送信 if(window != window.parent){ var json_obj = {'alive':1}; if(typeof JSON == 'undefined'){return} var json_str = JSON.stringify(json_obj); window.parent.postMessage(json_str, 'http://zafiel.wingall.com'); } // (親ウィンドウ側) messageリスナー追加 function addMessageEvent(){ if(window.addEventListener){ window.addEventListener('message', listener, false); } else{ attachEvent('onmessage', listener); } } // (親ウィンドウ側) メッセージを受け取って「alive」がセットされていれば生存と判定。 function listener(event){ try{ var json_str = event.data; var data = {}; if(typeof JSON != 'undefined'){ data = JSON.parse(json_str); } if(data.alive){ // 実際はここでフラグセット alert('iframe先は生きてるよ！'); } } catch(e){ alert('エラー発生！:' +e); } } |
ブラウザが少し限定されることと、iframe先のページが自分のコントロール下にあるのが前提となりますが、意外と使えるテクニックだと思いますヨ。
うん、postMessageは応用が色々効いて面白いなー。
2013年09月05日 ｜ Posted in Program ｜ No Comments »
コメントを残す