iframe先のページが404でないか判定する方法 (javascript)

こんばんは、ころすけ(@wg_koro)です。

キーボード

諸々の理由で、iframe先のページが生きているのか死んでいるのか(404など)、判定しなくてはならなくなりました。

さてどうしよう。iframeは404でもonload走るし、ステータスコード取れないし・・・。

そうだ、postMessage使おう

というわけで、たどり着いたのがpostMessageを使う方法。iframe先が自分のページであることが前提になりますが、こいつを使えばどうにかなる。

あ、「postMessage」はiframeを使って、異なるページ間でメッセージ(文字列)を送受信する仕組みです。クロスドメインであってもOK。IE以外はもちろんのこと、IEも8以上で対応しています。割と広いブラウザで使える技術です。

ページ作って試してみた。
iframe先が生きているかのテスト

上記のページを表示して「iframe先は生きてるよ!」というアラートが出れば、iframe先が生存していることを確認できています。

中身

やっていることは至極簡単。

  1. iframe先の子ページで、読み込みと同時に親ウィンドウにメッセージを送る。
  2. 親ページは、子ページからメッセージを受け取るとアラート表示

「子ページが404などで死んでいたら、メッセージが送られてこないので死んでいると判定する」というロジックです。

実際はアラートを表示させるのではなくフラグをセット。iframeのonload後、一定時間待ってもフラグがONになっていなければ死亡判定…という使い方になります。

[javascript]
// 子ウィンドウであった場合は親へメッセージ送信
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);
}
}
[/javascript]

ブラウザが少し限定されることと、iframe先のページが自分のコントロール下にあるのが前提となりますが、意外と使えるテクニックだと思いますヨ。

うん、postMessageは応用が色々効いて面白いなー。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください