1. ホーム
  2. javascript

[解決済み] HTML5 - クロスブラウザー iframe postMessage - 子から親へ?

2023-08-14 10:59:11

質問

私はこのチュートリアルに沿って http://www.youtube.com/watch?v=R2hOvZ7bwXU では、postMessage を使って iframe と親の間で安全にメッセージを受け渡す方法が説明されています。 http://html5demos.com/postmessage2

私の問題は、私はそれが逆の方法(子から親へ)で動作する必要があり、親ウィンドウをターゲットにする方法を知らないということです。

これは私のレシーバーコードです(親に)。

function handleMsg(e) {
    if(e.origin == "http://uc.dialogue.net") {
        let blah = e.data;
        alert(blah);    
    } else {
        alert("error");
    }
}
addEventListener("message", handleMsg, true);

で、これは単純なフォーム(子)がトリガーとなる送信関数です。

   let text = document.querySelector('.srchInput').value;
   window.parent.postMessage(text, "http://uc.dialogue.net");   

親を別の方法でターゲットにしたほうがいいでしょうか?

乾杯 ポール

どのように解決するのですか?

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         

からコピーしたコード ここに .