vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue iframe的使用

vue中iframe的使用及说明

作者:芝士焗红薯

这篇文章主要介绍了vue中iframe的使用及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

关于iframe的使用

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

<iframe id="iframe" :src="iframeSrc" style="height: calc(100% - 50px)" width="100%" frameborder="0"></iframe>

获取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:

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

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

您可能感兴趣的文章:
阅读全文