HTML5のwindow.postMessage()でクロスドメインでのiframe内から 親のwindowにメッセージを送る方法

Tweet

Share on Tumblr

HTML5のwindow.postMessage()でクロスドメインでのiframe内から 親のwindowにメッセージを送る方法 | Bamboo lath 日々の記録HTML5のwindow.postMessage()でクロスドメインでのiframe内から
親のwindowにメッセージを送る方法。

クロスドメインのページをiframeで読み込んだときに
iframe内のページ（長いページ）が遷移したら親ページもページの
上部に移動するようにしたくて調査した。

■参考サイト
window.postMessage

window.postMessage() を使って、クロスドメインの iframe の高さを設定する検証

window.postMessage()の学習

上記のサイトを参考にして以下のようなコードを作成

■親ページ側に追加したjsのサンプル

$('#next_click').live('click', function(){
     var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
     if (typeof target != "undefined"){
         target.postMessage("page change", "*");
     }
});

上記でid:next_clickがクリックされたら親に「page chage」というメッセージが送られる。
※jQuery使用

■子ページ側に追加したjsのサンプル

$(function(){
        $(window).on("message", function(e){
        if (e.originalEvent.origin == 'http://許可するドメイン') {
            var data=e.originalEvent.data;
            if(data==='page change'){
                $('html,body').animate({scrollTop:0}, 400);
            }
        }
    });
})

上記で子でメッセージを受けとった際にページを上部まで移動させられる。
※jQuery使用
最初にあげた参考サイトではaddEventListenerを使っていたけど↑はjQueryで
イベントをセットしている。
jQueryを使う場合は「e.origin」や「e.data」でデータが取得できないので
「e.originalEvent.origin」や「e.originalEvent.data」でデータを取得する。
※eをconsole.dirすればわかる。