iframe的跨域通讯与jQuery的postMessage插件

我尝试使用以下插件孩子iframe和母公司之间的沟通：iframe的跨域通讯与jQuery的postMessage插件

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 
    ); 

});

我实在看不出这是为什么不工作，我在绝望需要帮助！

来源

2012-06-07 RyanP13

从来没有使用过这个插件，不能真正说出它有什么问题，但是，或者您可以使用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-21 17:50:26 Damium

我有一个类似的要求，并最终使用postMessage从孩子发送数据到父母。然后，要将数据从父级发送到子级，我通过iframe的src属性将查询字符串中的数据传递给了该数据。通过这样做，我可以解析查询字符串并检索我的子页面中的数据。

来源

2013-08-14 20:41:51

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-31 00:59:09

iframe的跨域通讯与jQuery的postMessage插件

回答

相关问题