如何在iframe和父网站之间进行通信？

Question

如何在iframe和父网站之间进行通信？

iframe中的网站不在同一个域中，但两者都是我的，我想iframe在父网站之间进行通信。可能吗？

Answer 1

对于不同的域，无法直接调用方法或访问iframe的内容文档。您必须使用跨文档消息传递。例如在顶部窗口中： myIframe.contentWindow.postMessage('hello', '*');在iframe中：window.onmessage = function(e){     if (e.data == 'hello') {         alert('It works!');     }};如果要将iframe中的消息发布到父窗口window.top.postMessage('hello', '*')

Answer 2

它必须在这里，因为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)