您现在的位置是：网站首页> 编程资料编程资料
vue中iframe的使用及说明_vue.js_
2023-05-24
356人已围观
简介 vue中iframe的使用及说明_vue.js_
关于iframe的使用
iframe在同域时能自由操作iframe和父框架的内容(DOM)，在跨域时可以实现页面跳转。
获取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() } })使用iframe的总结
需求描述：在后台管理系统中需要预览配置的数据在手机上显示的样式，方便后台管理人员操作，因为预览的内容比较多，h5已经写好了一套代码，所以利用iframe将h5的页面展示引入到后台
代码展示
iframe：
srcH5:'/iframeH5/preview',
父页面给子页面传值：
var iframe = document.getElementById('iframe'); var msg = {name:'张三'} var childDomain = 'http://localhost:80/' //预览页面的域名 iframe.contentWindow.postMessage(msg, childDomain);子页面给父页面传值：在mounted中调用，避免未渲染完成，无法拿到数据
//拿到父页面传递的值 window.addEventListener('message', (obj) => { this.obj = obj.data; console.log('拿到数据了吗', this.obj ); }, false); //将预览成功的信息返回给父页面 window.parent.postMessage({ data: { code:'success' } }, '*');父页面监听子页面返回的成功信息，做进一步操作
window.addEventListener('message', this.handleMessage); // 监听h5页面的通信 handleMessage (event) { const data = event.data.data; if(data && data.code === 'success') { 。。。。。。 } },以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- 关于iview和elementUI组件样式覆盖无效问题及解决_vue.js_
- vue如何把组件方法暴露到window对象中_vue.js_
- Vue中子组件向父组件传值$emit、.sync的案例详解_vue.js_
- Fabric.js 实现变换视窗示例详解_JavaScript_
- Node.js常用三大模块之path模块_node.js_
- vue3实现移动端滑动模块_vue.js_
- 使用vue-cli搭建SPA项目的详细过程_vue.js_
- 关于找到任意组件实例的方法_vue.js_
- 面试问题Vue双向数据绑定原理_vue.js_
- react中braft-editor的基本使用方式_React_
