วิธีการสื่อสารระหว่าง iframe และไซต์แม่

เว็บไซต์ใน iframe ไม่ได้อยู่ในโดเมนเดียวกันแต่ทั้งคู่เป็นของฉันและฉันต้องการสื่อสารระหว่างiframeและกับเว็บไซต์แม่ เป็นไปได้ไหม?

ด้วยโดเมนที่ต่างกันจึงไม่สามารถเรียกวิธีการหรือเข้าถึงเอกสารเนื้อหาของ iframe ได้โดยตรง

คุณต้องใช้การส่งข้อความข้ามเอกสาร

ตัวอย่างเช่นในหน้าต่างด้านบน:

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

และใน iframe:

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

หากคุณกำลังโพสต์ข้อความจาก iframe ไปที่หน้าต่างหลัก

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

มันจะต้องอยู่ที่นี่เพราะคำตอบที่ได้รับการยอมรับจาก 2012

ในปี 2018 และเบราว์เซอร์สมัยใหม่คุณสามารถส่งเหตุการณ์ที่กำหนดเองจาก iframe ไปยังหน้าต่างหลัก

iframe:

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

ผู้ปกครอง:

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

PS: แน่นอนคุณสามารถส่งกิจกรรมในทิศทางตรงกันข้ามในลักษณะเดียวกัน

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

ห้องสมุดนี้รองรับ HTML5 postMessage และเบราว์เซอร์รุ่นเก่าที่มีการปรับขนาด + แฮชhttps://github.com/ternarylabs/porthole

แก้ไข: ตอนนี้ในปี 2014 การใช้งาน IE6 / 7 ค่อนข้างต่ำ IE8 และเหนือการสนับสนุนทั้งหมดpostMessageดังนั้นตอนนี้ฉันแนะนำให้ใช้แค่นั้น

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

window.topคุณสมบัติควรจะสามารถที่จะให้สิ่งที่คุณต้องการ

เช่น

alert(top.location.href)

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

คุณยังสามารถใช้

postMessage(message, '*');

ใช้event.source.window.postMessageเพื่อส่งกลับไปยังผู้ส่ง

จาก Iframe

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

จากนั้นผู้ปกครองพูดกลับ

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