2010-08-11 35 views
74

Có vẻ như điểm của window.postMessage là cho phép giao tiếp an toàn giữa các cửa sổ/khung được lưu trữ trên các miền khác nhau, nhưng dường như không thực sự là cho phép trong Chrome.Bạn sử dụng window.postMessage trên các tên miền như thế nào?

Đây là kịch bản:

  1. Nhúng một <iframe> (với một src trên tên miền B *) trong một trang trên tên miền Một
  2. Các <iframe> kết thúc lên được chủ yếu là một kịch bản < > thẻ, ở cuối quá trình thực hiện ...
  3. Tôi gọi window.postMessage (some_data, page_on_A)

Các <iframe> là chắc chắn nhất trong bối cảnh miền B, và tôi đã xác nhận rằng javascript nhúng trong đó <iframe> thực hiện đúng và gọi postMessage với các giá trị chính xác.

tôi nhận được thông báo lỗi này trong Chrome:

Không thể gửi thông điệp tới Một. Người nhận có nguồn gốc B.

Dưới đây là đoạn code mà đăng ký một thông báo sự kiện người nghe trong trang trên A:

window.addEventListener(
    "message", 
    function (event) { 
    // Do something 
    }, 
    false); 

Tôi cũng đã cố gắng gọi window.postMessage(some_data, '*'), nhưng tất cả điều đó không được ngăn chặn lỗi.

Tôi chỉ thiếu điểm ở đây, là window.postMessage (...) không có ý nghĩa cho điều này? Hay tôi chỉ làm điều đó sai lầm khủng khiếp?

* Mime-type text/html, nó phải còn lại.

+1

Bạn có thể nhận thức điều này đã có, nhưng MDC có tuyệt vời tóm tắt về postMessage: https://developer.mozilla.org/en/DOM/window.postMessage Để thực hiện FF rõ ràng, nhưng có thể có một cái gì đó có giải thích tại sao nó không hoạt động. –

Trả lời

66

Dưới đây là ví dụ hoạt động trên Chrome 5.0.375.125.

Trang B (nội dung iframe):

<html> 
    <head></head> 
    <body> 
     <script> 
      top.postMessage('hello', 'A'); 
     </script> 
    </body> 
</html> 

Lưu ý việc sử dụng top.postMessage hoặc parent.postMessage không window.postMessage đây

Trang A:

<html> 
<head></head> 
<body> 
    <iframe src="B"></iframe> 
    <script> 
     window.addEventListener("message", 
      function (e) { 
       if(e.origin !== 'B'){ return; } 
       alert(e.data); 
      }, 
      false); 
    </script> 
</body> 
</html> 

A và B phải có một cái gì đó như http://domain.com

EDIT:

Từ another question, có vẻ các lĩnh vực (A và B ở đây) phải có một / cho postMessage hoạt động tốt.

+3

Khi trang A kiểm tra nguồn gốc của tin nhắn, nguồn gốc sẽ KHÔNG chứa dấu '/'. Nó không có vẻ quan trọng nếu trang B chỉ định dấu '/' hay không. Một điều cần lưu ý khác là URL phải là URL tuyệt đối. – Catch22

+1

Câu trả lời này khiến tôi hơi bối rối và vẫn đang tìm kiếm câu trả lời. http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage chứa một lời giải thích rất tốt về postMessage. Điều quan trọng là người gửi tin nhắn biết tên miền của người nhận. Trong ví dụ trên, A và B không phải là cùng một tên miền, nhưng B phải biết chính xác tên miền nào được sử dụng bởi A. –

+1

Câu hỏi đặt ra là về tên miền chéo. Câu trả lời được chấp nhận là về cùng một tên miền. – stackular

1

Có thể bạn cố gắng gửi dữ liệu của mình từ mydomain.com đến www.mydomain.com hoặc ngược lại, LƯU Ý bạn đã bỏ lỡ "www". http://mydomain.comhttp://www.mydomain.com là các miền khác nhau để javascript.

+1

Trong một dự án tôi đang làm, tôi đang sử dụng 'file: ///' Có thể bị lỗi miền khi kéo nội dung chỉ từ hệ thống tệp cục bộ? – Jacksonkr

15

Bạn nên đăng thông báo từ khung này lên cha mẹ, sau khi được tải.

khung kịch bản:

$(document).ready(function() { 
    window.parent.postMessage("I'm loaded", "*"); 
}); 

Và lắng nghe nó trong mẹ:

function listenMessage(msg) { 
    alert(msg); 
} 

if (window.addEventListener) { 
    window.addEventListener("message", listenMessage, false); 
} else { 
    window.attachEvent("onmessage", listenMessage); 
} 

Sử dụng liên kết này để biết thêm: http://en.wikipedia.org/wiki/Web_Messaging

Các vấn đề liên quan