Tôi làm cách nào để thực hiện postMessage đa miền?

Question

Tài liệu cho postMessage ngụ ý rằng việc nhắn tin giữa nhiều miền là có thể. Tuy nhiên:

// When the popup has fully loaded, if not blocked by a popup blocker 

Đó không phải là một lưu ý rất rõ ràng về cách để thực sự làm điều đó.

Hãy tưởng tượng hai trang web:

1. [Chánh] lưu trữ trên qc-a.nfshost.com
2. [Child] lưu trữ trên qc-b.quadhome.com

Trong phụ huynh:

document.addEventListener('message', function(e) { 
    alert('Parent got (from ' + e.origin + '): ' + e.data); 

    e.source.postMessage('Round-tripped!', 'http://qc-b.quadhome.com'); 
}, false); 

function go() { 
    var w = window.open('http://qc-b.quadhome.com', 'test'); 

    /* This doesn't work because same-origin policy prevents knowing when 
    the opened window is ready. */ 

    w.postMessage('Vain attempt.', 'http://qc-b.quadhome.com'); 
} 

Và, trong con:

document.addEventListener('message', function(e) { 
    alert('Child got (from ' + e.origin + '): ' + e.data); 
}, false); 

window.opener.postMessage('Ready!', 'http://qc-a.nfshost.com'); 

Tất cả không có kết quả.

Trợ giúp?

Answer 1

Hiện tại, tôi thấy hai vấn đề. Lỗi nhẹ trong mã và vấn đề thời gian chờ.

1) Lỗi tôi thấy trong mã của bạn là bạn đang sử dụng document.addEventListener. Tôi nghĩ cái đúng là window.addEventListener. Đó là ví dụ trên trang postMessage.

2) Với thời gian chờ, bạn có thể có cửa sổ con postMessage cho phụ huynh. Cửa sổ cha mẹ sẽ biết khi nào đứa trẻ đã sẵn sàng.

Answer 2

Bạn đang mở cửa sổ & đăng thông báo sau mỗi lần khác. Không có cách nào tài liệu mở sẽ sẵn sàng chấp nhận thông báo đăng bài. Thử trì hoãn cuộc gọi postMessage cho đến khi cửa sổ tải xong.

Một cách rất đơn giản để kiểm tra điều này là quấn w.postMessage() trong một setTimeout (trong 10 giây) và xem liệu nó có thể đăng nó khi tài liệu đã sẵn sàng hay không.