iframe中的网站不在同一个域中,但都是我的,我想在iframe和父站点之间进行通信。这可能吗?
窗外。顶级物业应该能满足你的需要。
如。
alert(top.location.href)
看到 http://cross-browser.com/talk/inter-frame_comm.html
对于不同的域,不可能直接调用方法或访问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
在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)
使用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', '*')
}
在花了2天时间试图获得一个iFrame发布消息回父,一个Vue应用程序在我的情况下,我遇到了这个优秀的参考:
https://dev-bay.com/iframe-and-parent-window-postmessage-communication/
从iframe到parent:
const parentWindow = window.parent;
class Message {
constructor(type, body) {
this.type = type;
this.body = body;
}
};
function sendMessage (windowObj, payload) {
if(windowObj) {
windowObj.postMessage(payload, "*");
}
};
//Then call appropriately:
sendMessage(parentWindow, new Message("button-click", "Show Stats Overlay"));
在父文件中,我的Vue应用程序挂载了生命周期事件,但请参考您自己的需求链接:
window.addEventListener("message", (e) => {
var data = e.data;
console.log("RECEIVED message from CHILD TO PARENT", data);
var type = data.type;
var body = data.body;
if(type === "button-click" && body) {
console.log("button-click RECEIVED FROM CHILD")
//Additional functionality ...
} else if (type === "text-msg" && body) {
console.log("TEXT MESSAGE RECEIVED FROM CHILD");
//Additional functionality ...
}
});
请参阅从父节点到iFrame的通信示例。
希望这能帮助到其他人。
推荐文章
- AngularJS:工厂和服务?
- js:将一个组件包装成另一个组件
- 我如何在网站上使用谷歌的Roboto字体?
- 父ng-repeat从子ng-repeat的访问索引
- 如何禁用文本区域大小调整?
- JSHint和jQuery: '$'没有定义
- 模仿JavaScript中的集合?
- 用JavaScript验证电话号码
- 如何在HTML5中改变视频的播放速度?
- 保留HTML字体大小时,iPhone的方向从纵向改变为横向
- 谷歌地图API v3:我可以setZoom后fitBounds?
- ES6/2015中的null安全属性访问(和条件赋值)
- 与push()相反;
- 嵌套行与自举网格系统?
- JS字符串“+”vs concat方法