iframe中的网站不在同一个域中,但都是我的,我想在iframe和父站点之间进行通信。这可能吗?
当前回答
对于不同的域,不可能直接调用方法或访问iframe的内容文档。
您必须使用跨文档消息传递。
Parent -> iframe
例如在顶部窗口:
myIframe.contentWindow.postMessage('hello', '*');
在iframe中:
window.onmessage = function(e) {
if (e.data == 'hello') {
alert('It works!');
}
};
Iframe ->父级
例如在顶部窗口:
window.onmessage = function(e) {
if (e.data == 'hello') {
alert('It works!');
}
};
在iframe中:
window.top.postMessage('hello', '*')
其他回答
这个库支持HTML5 postMessage和resize+hash https://github.com/ternarylabs/porthole的传统浏览器
编辑:现在在2014年,IE6/7的使用率相当低,IE8和以上所有支持postMessage,所以我现在建议只使用它。
https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage
你也可以使用
postMessage消息(,' * ');
使用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', '*')
}
在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)
窗外。顶级物业应该能满足你的需要。
如。
alert(top.location.href)
看到 http://cross-browser.com/talk/inter-frame_comm.html
推荐文章
- 我如何使用Jest模拟JavaScript的“窗口”对象?
- 如何使Bootstrap 4卡在卡列相同的高度?
- 我如何等待一个承诺完成之前返回一个函数的变量?
- 在JavaScript中根据键值查找和删除数组中的对象
- 使嵌套JavaScript对象平放/不平放的最快方法
- 使用域集图例引导
- 如何以及为什么'a'['toUpperCase']()在JavaScript工作?
- 音频停止功能
- 有Grunt生成index.html不同的设置
- 如何禁用谷歌翻译从HTML在Chrome
- 文档之间的区别。addEventListener和window。addEventListener?
- 如何检查动态附加的事件监听器是否存在?
- 如何写setTimeout与参数Coffeescript
- 将JavaScript字符串中的多个空格替换为单个空格
- 向HTML表中添加水平滚动条