こんばんは、ころすけ(@wg_koro)です。
諸々の理由で、iframe先のページが生きているのか死んでいるのか(404など)、判定しなくてはならなくなりました。
さてどうしよう。iframeは404でもonload走るし、ステータスコード取れないし・・・。
そうだ、postMessage使おう
というわけで、たどり着いたのがpostMessageを使う方法。iframe先が自分のページであることが前提になりますが、こいつを使えばどうにかなる。
あ、「postMessage」はiframeを使って、異なるページ間でメッセージ(文字列)を送受信する仕組みです。クロスドメインであってもOK。IE以外はもちろんのこと、IEも8以上で対応しています。割と広いブラウザで使える技術です。
ページ作って試してみた。
iframe先が生きているかのテスト
上記のページを表示して「iframe先は生きてるよ！」というアラートが出れば、iframe先が生存していることを確認できています。
中身
やっていることは至極簡単。
- iframe先の子ページで、読み込みと同時に親ウィンドウにメッセージを送る。
- 親ページは、子ページからメッセージを受け取るとアラート表示
「子ページが404などで死んでいたら、メッセージが送られてこないので死んでいると判定する」というロジックです。
実際はアラートを表示させるのではなくフラグをセット。iframeのonload後、一定時間待ってもフラグがONになっていなければ死亡判定…という使い方になります。
// 子ウィンドウであった場合は親へメッセージ送信
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, ‘https://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);
}
}
[/javascript]
ブラウザが少し限定されることと、iframe先のページが自分のコントロール下にあるのが前提となりますが、意外と使えるテクニックだと思いますヨ。
うん、postMessageは応用が色々効いて面白いなー。