Kích hoạt sự kiện tùy chỉnh từ khung nội tuyến sang tài liệu gốc

Question

Tôi đang gặp sự cố khi kích hoạt sự kiện tùy chỉnh bên trong khung nội tuyến và phát hiện nó từ tài liệu gốc. Cả hai khung nội tuyến và tài liệu gốc đều có cùng một nguồn (cùng một giao thức, cùng một máy chủ, cùng một cổng).

Mọi lời khuyên?

Answer 1

này hoạt động:

parent.$('body').trigger('eventName'); 

sự kiện kích hoạt bên trong iframe sẽ được phát hiện trong tài liệu gốc.

Answer 2

Tôi đã gặp sự cố tương tự và đã sử dụng window.postMessage để giải quyết.

Hiện tại, API chỉ hỗ trợ truyền một chuỗi, nhưng nếu bạn sửa đổi giải pháp của mình, nó có thể mạnh mẽ. Thông tin chi tiết here

Từ trang nguồn (được tiêu thụ bởi một khung nội tuyến):
postMessage API hy vọng 2 params - tin nhắn, nhắm mục tiêu

ví dụ: window.parent.postMessage("HELLO_PARENT", 'http://parent.com');

Từ trang mẹ (chứa iframe. Ví dụ: Vùng chứa):

1. Thêm người nghe sự kiện như bình thường

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

2. Xác định chức năng của bạn với kiểm tra event.origin (đối với an ninh) \

   function handleMessage(event) { 
       if (event.origin != "h ttp://child.com") { return; } 
       switch(event.data.message) { 
        case "HELLO_PARENT": 
         alert("Hello Child"); 
         break; 
       } 
   } 
   

Answer 3

Một câu trả lời phù hợp hỗ trợ cả hai cùng một tên miền và iframe cross-domain là sử dụng hệ thống sự kiện.

Mục tiêu là gửi sự kiện tùy chỉnh từ khung nội tuyến đến phụ huynh.

Trong tập tin nguồn iframe:

var myCustomData: { foo: 'bar' } 
var event = new CustomEvent('myEvent', { detail: myCustomData }) 
window.parent.document.dispatchEvent(event) 

Và trong tệp gốc chứa iframe:

window.document.addEventListener('myEvent', handleEvent, false) 
function handleEvent(e) { 
    console.log(e.detail) // outputs: {foo: 'bar'} 
}