iframe与父网站之间如何通信?

2020/10/19 03:41 · javascript ·  · 0评论

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和具有resize + hash的旧版浏览器https://github.com/ternarylabs/porthole

编辑:现在,在2014年,IE6 / 7的使用率非常低,IE8以及所有这些都首先得到支持,postMessage所以我现在建议只使用它。

https://developer.mozilla.org/zh-CN/docs/Web/API/Window.postMessage

window.top物业应能够满足您的需求。

例如

alert(top.location.href)

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

使用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', '*')
}

您也可以使用

postMessage(message, '*');

本文地址:http://javascript.askforanswer.com/iframeyufuwangzhanzhijianruhetongxin.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!