Bagaimana cara berkomunikasi antara iframe dan situs induk?

Situs web di iframe tidak terletak di domain yang sama , tetapi keduanya milik saya, dan saya ingin berkomunikasi antara iframesitus induk dan. Apa itu mungkin?

Dengan domain yang berbeda, tidak mungkin untuk memanggil metode atau mengakses dokumen konten iframe secara langsung.

Anda harus menggunakan pesan lintas dokumen .

Misalnya di jendela atas:

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

dan di iframe:

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

Jika Anda memposting pesan dari iframe ke jendela induk

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

Itu harus di sini, karena jawaban yang diterima dari 2012

Pada 2018 dan browser modern, Anda dapat mengirim acara khusus dari iframe ke jendela induk.

iframe:

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

induk:

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

PS: Tentu saja, Anda bisa mengirim acara dengan arah yang berlawanan dengan cara yang sama.

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

Perpustakaan ini mendukung HTML5 postMessage dan browser lama dengan mengubah ukuran + hash https://github.com/ternarylabs/porthole

Sunting: Sekarang pada tahun 2014, penggunaan IE6 / 7 cukup rendah, IE8 dan di atas semua dukungan postMessagejadi saya sekarang menyarankan untuk hanya menggunakan itu.

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

yang window.topproperti harus dapat memberikan apa yang Anda butuhkan.

Misalnya

alert(top.location.href)

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

Anda juga bisa menggunakan

postMessage(message, '*');

Gunakan event.source.window.postMessageuntuk mengirim kembali ke pengirim.

Dari Iframe

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

Kemudian dari orangtua katakan kembali.

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