Làm thế nào để giao tiếp giữa iframe và trang mẹ?

Trang web trong iframe không nằm trong cùng một tên miền , nhưng cả hai đều là của tôi và tôi muốn liên lạc giữa iframetrang web chính và trang mẹ. Có thể không?

Với các miền khác nhau, không thể gọi phương thức hoặc truy cập trực tiếp vào tài liệu nội dung của iframe.

Bạn phải sử dụng tin nhắn tài liệu chéo .

Ví dụ trong cửa sổ trên cùng:

 myIframe.contentWindow.postMessage('hello', '*');

và trong iframe:

window.onmessage = function(e){
    if (e.data == 'hello') {
        alert('It works!');
    }
};

Nếu bạn đang đăng thông báo từ iframe lên cửa sổ cha

window.top.postMessage('hello', '*')

Nó phải ở đây, vì câu trả lời được chấp nhận từ năm 2012

Trong năm 2018 và các trình duyệt hiện đại, bạn có thể gửi một sự kiện tùy chỉnh từ iframe đến cửa sổ cha.

iframe:

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

cha mẹ:

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

PS: Tất nhiên, bạn có thể gửi các sự kiện theo hướng ngược lại theo cùng một cách.

document.querySelector('#iframe_id').contentDocument.dispatchEvent(event)

Thư viện này hỗ trợ HTML5 postMessage và các trình duyệt cũ với thay đổi kích thước + băm https://github.com/ternarylabs/porthole

Chỉnh sửa: Bây giờ trong năm 2014, việc sử dụng IE6 / 7 khá thấp, IE8 và trên hết là hỗ trợ postMessagenên giờ tôi đề nghị chỉ sử dụng nó.

https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage

các window.toptài sản sẽ có thể cung cấp cho những gì bạn cần.

Ví dụ

alert(top.location.href)

Xem http://cross-browser.com/talk/inter-frame_comm.html

Bạn cũng có thể dùng

postMessage(message, '*');

Sử dụng event.source.window.postMessageđể gửi lại cho người gửi.

Từ khung nội tuyến

window.top.postMessage('I am Iframe', '*')
window.onmessage = (event) => {
    if (event.data === 'GOT_YOU_IFRAME') {
        console.log('Parent received successfully.')
    }
}

Rồi từ bố mẹ nói lại.

window.onmessage = (event) => {
    event.source.window.postMessage('GOT_YOU_IFRAME', '*')
}