JavaScript - Thử & Bắt - Sự cố Chụp Window.postMessage() Lỗi

Question

Tôi gặp sự cố khi gặp lỗi khi sử dụng window.postMessage(). .

Tôi muốn để có thể nắm bắt được lỗi Tôi nhận được -

"Không thể gửi thông điệp tới http://www.that-domain.com người nhận có nguồn gốc http://www.this-domain.com

Simple mã ví dụ (nên lỗi):

try { 
    window.postMessage('1','http://www.differentDomain.com'); 
} 
catch (e) {  
    alert('error'); 
} 

Quy trình chi tiết hơn: Tôi đang thêm iframe tên miền chéo vào tài liệu với jQuery và sau đó đăng lên đó. Điều này không nên lỗi vì nguồn gốc mục tiêu phải khớp nhau - chúng là bo th được thiết lập bởi biến proxyDomain.

var $iframeProxy = $('<iframe id="myIFrame" src="' + proxyDomain + '"></iframe>').appendTo('body'); 

window.storageProxy = $iframeProxy[0].contentWindow; 

try { 
    window.storageProxy.postMessage(message, proxyDomain); 
} 
catch (e) {  
    alert('error'); 
} 

Answer 1

Có vẻ như nó được nêu trong thông số HTML5 rằng nếu nguồn gốc của tên không khớp thì không có lỗi nào được ném và sẽ hủy bỏ âm thầm.

http://www.whatwg.org/specs/web-apps/current-work/multipage/web-messaging.html#web-messaging

10.4.3 gửi những tin nhắn - Phần # 9

" ... nếu đối số targetOrigin là một URL tuyệt đối, và các tài liệu của đối tượng Window trên mà phương pháp này được gọi không có cùng nguồn gốc như targetOrigin, sau đó hủy bỏ các bước này một cách âm thầm. "

Answer 2

Bạn có thể gặp lỗi ở phía người nhận. Trong vanilla javascript bạn có thể làm:

window.addEventListener('message', function() { 
    try { 
     not.existing.objects = 'Something dangerous!'; 
    } catch(e) { 
     console.log('error at message receive: ' + e + ' stack trace: ' + e.stack); 
    } 
}, false); 

Hoặc bạn có thể gửi lại trang chủ của bạn trong khối catch, nếu bạn muốn xử lý ở đó.

Answer 3

Không có cách nào để bắt lỗi, nhưng thường là lỗi xảy ra nếu nguồn gốc đích khác nhau, trường hợp là thử nghiệm so với kịch bản sản xuất.

Vì vậy, bạn có thể kiểm tra là những gì các miền phụ huynh và thay đổi nguồn gốc mục tiêu cho phù hợp:

function getTargetOrigin() 
{ 
    try { 
     var url = (window.location != window.parent.location) ? document.referrer : document.location.href; 
     if (url.indexOf('www.myproduction-website.com')!=-1) 
      return document.location.protocol + '//www.myproduction-website.com' 
     else //set the alternative target 
      return document.location.protocol + '//' + url.split('/')[2]; 
    } 
    catch(e) //falback to production 
    { 
     return document.location.protocol + '//www.myproduction-website.com' 
    } 
} 

và sử dụng nó bên trong hàm postMessage:

function postMessage(message){ 
    window.top.postMessage(message,getTargetOrigin()); 
} 

Với giải pháp này bạn có thể sử dụng cùng một mã trong cấu hình nhiều máy chủ mà không cần mã hóa cứng url đích.

Giải pháp này không thành công nếu bạn điều hướng bên trong khung và kiểm tra lại tài liệu.referrer, trong trường hợp đó, nó sẽ không chứa url mẹ mà là url khung trước đó. Trong trường hợp đó, hãy xem xét sử dụng '*' làm url targetOrigin, đó là giải pháp làm việc duy nhất để gửi thư đến các miền khác.

Hy vọng điều đó sẽ hữu ích!