iframe nhắn miền chéo với jQuery postMessage Plugin

Question

tôi đang cố gắng để giao tiếp giữa một iframe trẻ em và cha mẹ của nó sử dụng các plugin sau:

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

Tôi có thể làm theo ví dụ và gửi một tin nhắn từ đứa trẻ cha mẹ nhưng không phải là cách khác và tôi thực sự cần để có thể giao tiếp cả hai cách.

Các mã trên phụ huynh như sau:

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

Và mã trên con như sau:

$(function() { 

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

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

}); 

Tôi thực sự không thể nhìn thấy tại sao điều này không hoạt động và đang trong tuyệt vọng cần giúp đỡ!

Answer 1

Không bao giờ sử dụng plugin đó, có thể không thực sự nói điều gì sai với nó, nhưng, luân phiên bạn có thể sử dụng HTML 5 postMessage.

Vì bạn muốn gửi dữ liệu đến các iframe, đăng ký một người biết lắng nghe sự kiện trên nó:

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

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

Hãy chắc chắn để kiểm tra nguồn gốc đối với miền tin cậy của bạn để ngăn chặn thiệt hại, thay vì "*", mà sẽ chấp nhận tất cả .

Bây giờ bạn có thể gọi

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

Một lần nữa, bạn nên thay đổi "*" với các tên miền đích.

Answer 2

Tôi đã có một yêu cầu tương tự và đã kết thúc bằng cách sử dụng postMessage để gửi dữ liệu từ trẻ đến cha mẹ. Sau đó, để gửi dữ liệu từ cha mẹ đến đứa trẻ, tôi đã chuyển dữ liệu trong chuỗi truy vấn thông qua thuộc tính src của khung nội tuyến. Bằng cách đó, tôi có thể phân tích cú pháp chuỗi truy vấn và truy xuất dữ liệu trong trang con của tôi.

Answer 3

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