web-dev-qa-db-ja.com

子から親へのクロスサイトiframepostMessage

私はこれを見つけました sample from SO私の問題を閲覧しているときに、私のシナリオでそれを使用する方法を正確に知りたいです。私は別のものからのiframeを持っていますドメインで、iframeのURLが別のドメインのあるページから別のページに変更されたことを検出したいので、iframeの2番目のページを開いたときに次のようなものを考えていました。

<script type="text/javascript">
    $(document).ready(function() {
parent.postMessage("Second Page");
}
</script>

必要なのはそれだけです。iframeのURLが異なるというメッセージを受信する必要があります。親ページに、次のようなものがあります。

<script type="text/javascript">
    $(document).ready(function() {
        $('#frame').load(function () { 
            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 secondPageValue = // I want to get the value from the child page here, how can I do that?
},false);               
        });
    });
</script>

私はこのpostMessageオプションを初めて使用しようとしているので、すべてのアドバイスをいただければ幸いです。また、これを機能させるには、子側にjqueryなどのJSライブラリを含める必要がありますか？

よろしくお願いします、Laziale

javascriptjqueryhtmliframepostmessage
9
Laziale

PostMessageを使用する場合は、targetOriginを設定する必要があります。

<script type="text/javascript">
    $(document).ready(function() {
       parent.postMessage("Second Page",'*');
    }
</script>

次に、[ホスト]ページで。

function addAnEventListener(obj,evt,func){
    if ('addEventListener' in obj){
        obj.addEventListener(evt,func, false);
    } else if ('attachEvent' in obj){//IE
        obj.attachEvent('on'+evt,func);
    }
}

function iFrameListener(event){
     secondPageValue = event.data;
}

var secondPageValue='';

addAnEventListener(window,'message',iFrameListener);
12
David Bradshaw

チェック http://davidwalsh.name/window-iframe アウト。これは完璧な実例です。

親オブジェクトは、子からメインウィンドウへの参照を提供します。したがって、iFrameがあり、その中に親をコンソールする場合、コンソールは次のようになります。

// Every two seconds....
setInterval(function() {
    // Send the message "Hello" to the parent window
    // ...if the domain is still "davidwalsh.name"
    parent.postMessage("Hello","http://davidwalsh.name");
}, 3000);

これでウィンドウが保持されたので、それにメッセージを投稿できます。

// Create IE + others compatible event handler
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) {
  console.log('parent received message!:  ',e.data);
},false);

上記のディレクティブは、iFrameをトリガーして3秒ごとに親ウィンドウにメッセージを送信します。メインウィンドウからの最初のメッセージは必要ありません！

5
Dilip Rajkumar