10

次のプラグインを使用して、子 iframe とその親の間で通信しようとしています:

http://benalman.com/projects/jquery-postmessage-plugin/

私は例に従って、子供から親にメッセージを投稿できますが、その逆はできません。両方の方法で通信できるようにする必要があります。

親のコードは次のとおりです。

var origin = document.location.protocol + '//' + document.location.host,
    src = origin + '/Custom/Ui/Baseline/html/iframe-data-cash.htm#' + encodeURIComponent(document.location.href);

$(function () {

    var $holder = $('#iframe'),
        height,
        $iframe = $('<iframe src="' + src + '" id="data-cash-iframe" width="100%" scrolling="no" allowtransparency="true" seamless="seamless" frameborder="0" marginheight="0" marginwidth="0"></iframe>');

    // append iframe to DOM
    $holder.append($iframe);

});

$(window).load(function () {
    $.postMessage(
        'hello world',
        src,
        parent.document.getElementById('data-cash-iframe').contentWindow
    );
});

そして、子のコードは次のとおりです。

$(function () {

    var parentURL = decodeURIComponent(document.location.hash.replace(/^#/, ''));

    $.receiveMessage(
        function (e) {
            alert(e.data);
        },
        parentURL
    );

});

これが機能しない理由が本当にわかりません。助けが切実に必要です!

4

3 に答える 3

8

そのプラグインを使用したことがないため、何が問題なのかはわかりませんが、代わりに HTML 5 postMessage を使用できます。

iframe にデータを送信したいので、イベント リスナーを登録します。

window.addEventListener('message', receiver, false);

function receiver(e) {
   if (e.origin == '*') {
     return;
   } else {
     console.log(e.data);
   }
}

すべてを受け入れる "*" の代わりに、損傷を防ぐために、信頼できるドメインに対して発信元を確認してください。

今、あなたは呼び出すことができます

message = "data";
iframe = document.getElementById('iframe');  
iframe.contentWindow.postMessage(message, '*');

ここでも、「*」を宛先ドメインに変更する必要があります。

于 2013-03-21T17:50:26.360 に答える
2 
1.sendPage
<script type='text/javascript'>
var sendpost = document.getElementById('wrapper').scrollHeight;
var target = parent.postMessage ? parent : (parent.document.postMessage ?   parent.document : undefined); 
target.postMessage(sendpost,'*');
</script>
2. real iframe load page
function handling(e){
                sendIframeHeight = e.data;
}

// <= ie8
if (!window.addEventListener) {
                window.attachEvent("onmessage", handling);
}else{ // > ie8
                window.addEventListener('message', handling, false);
}
于 2014-10-31T00:59:09.823 に答える
1

同様の要件があり、postMessage を使用して子から親にデータを送信することになりました。次に、親から子にデータを送信するために、iframe の src 属性を介してクエリ文字列でデータを渡しました。そうすることで、クエリ文字列を解析し、子ページ内のデータを取得できます。

于 2013-08-14T20:41:51.713 に答える