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になっていなければ死亡判定…という使い方になります。

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

// 子ウィンドウであった場合は親へメッセージ送信

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 »　

＜コード書いてて、一度ハマるとなかなか抜け出せないそのサーバー、リカバリープランはあるかい？＞

コメントを残すコメントをキャンセル

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

Program

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

そうだ、postMessage使おう

中身

関連記事

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル