vue中iframe的使用及说明

关于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').contentWindow

CDM跨域

如果你设置的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：

<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') {
? ? ? ? ? 。。。。。。
? ? ? ? }
? ? ? },

来源：https://blog.csdn.net/weixin_44320032/article/details/123871522