web-dev-qa-db-ja.com

Html5-クロスブラウザーiframeポストメッセージ-子から親へ？

私はこのチュートリアルに従っています- http://www.youtube.com/watch?v=R2hOvZ7bwX 、これは基本的にポストメッセージを使用してiframeと親の間でメッセージを安全に渡す方法を説明していますこのようなものになる- http://html5demos.com/postmessage2

私の問題は、逆に（子から親へ）動作し、親ウィンドウをターゲットにする方法がわからないことです。

これは私の親コードです（親で）-

function handlingMsg(e)
{alert("works")
    if(e.Origin == "http://uc.dialogue.net")
        {
                var blah = e.data;
                alert(blah);    
        }
        else{alert("error");}
}
addEventListener("message",handlingMsg, true);

そして、これは単純なフォーム（子）によってトリガーされるセンダー関数です-

   var text=$('.srchInput').val();
   window.parent.postMessage(text, "http://uc.dialogue.net");

別の方法で親をターゲットにする必要がありますか？

乾杯ポール

javascriptjqueryhtml5jquery-mobile
61
Dancer
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen to message from child window
eventer(messageEvent,function(e) {
    var key = e.message ? "message" : "data";
    var data = e[key];
    //run function//
},false);

親ページで上記の操作を行い、子ページで次の操作を行います-

parent.postMessage("loadMyOrders","*");  //  `*` on any domain

here からコピーしたコード。

101
Dancer

受け入れられた回答の最新の単純化されたバージョン（簡潔さを優先してレガシーIE8サポートをドロップします）：

window.addEventListener('message',function(e) {
    var key = e.message ? 'message' : 'data';
    var data = e[key];
    //run function//
},false);

見てください：

24
Avindra Goolcharan