位置: IT常识 - 正文
vue中iframe的使用(vuex iframe)
编辑：rootadmin推荐整理分享vue中iframe的使用(vuex iframe)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue iframe onload,vue中iframe如何传值,iframe嵌入vue组件,vue frame,vuex iframe,vuex iframe,vue iframe onload,vuex iframe,内容如对您有帮助，希望把文章链接给更多的朋友！
iframe在同域时能自由操作iframe和父框架的内容(DOM)，在跨域时可以实现页面跳转。
<iframe id="iframe" :src="iframeSrc" style="height: calc(100% - 50px)" width="100%" frameborder="0"></iframe>获取iframe里面的内容iframe.contentWindow, 获取iframe的window对象 iframe.contentDocument, 获取iframe的document对象
const _iframe = document.getElementById('iframe').contentWindowCDM跨域
如果你设置的iframe的域名和你top window的域名完全不同，可以使用CDM(cross document messaging)进行跨域消息的传递。
发送消息: 使用postmessage方法
postMessage(message, targetOrigin)
message: 传递给iframe的内容, 通常是string,最好不要传object对象，需要传对象时，使用JSON.stringfy转换。
targetOrigin: 接受你传递消息的域名，可以设置绝对路径，也可以设置""或者"/"。 表示任意域名都行，"/"表示只能传递给同域域名。
_iframe.postMessage(JSON.stringify(_obj), '*')接受消息: 监听message事件
当targetOrigin接受到message消息之后,会触发message事件。 message提供的event对象上有3个重要的属性，data,origin,source.
window.addEventListener('message', function (event) { console.log(event) if (event.origin === window.callBackUrl.iframeSrc) { _this.childData = event.data console.log(event.data) _this.saveForm() } })上一篇：前端原生Html免费模板网站总结(带网址)(前端 原生)
下一篇：Edge DEV 侧边栏没有Chat的解决办法。(edge 状态栏)
![[Html5] 彻底搞懂画布合成模式（globalCompositeOperation）的计算公式(html5 function)](https://www.jiuchutong.com/image/20231126/1700988359.jpg)