vue中iframe的使用及说明

　　目录

　　关于iframe的使用

　　iframe在同域时能自由操作iframe和父框架的内容(DOM)，在跨域时可以实现页面跳转。

　　获取iframe里面的内容

　　const _iframe = document.getElementById('iframe').contentWindow

　　CDM跨域

　　如果你设置的iframe的域名和你top window的域名完全不同，可以使用CDM(cross document messaging)进行跨域消息的传递。

　　发送消息: 使用postmessage方法

　　postMessage(message, 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：

　　id="iframe"

　　ref="iframe"

　　frameborder="0"

　　class="iframe"

　　:src="srcH5"   //srcH5:预览页面的地址

　　/>

　　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') {

　　。。。。。。

　　}

　　},

　　以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

　　您可能感兴趣的文章: