vue中iframe的使用及说明

 更新时间:2022年09月13日 09:17:25   作者:芝士焗红薯  
这篇文章主要介绍了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') {
          。。。。。。
        }
      },

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

相关文章

  • Vue做一个简单的随机点名册

    Vue做一个简单的随机点名册

    这篇文章主要介绍的是如何用Vue做一个简单的随机点名册,主要是做个简单的点名器,不做样式,需要的朋友可以参考一下,希望对你有所帮助
    2021-12-12
  • vue基于better-scroll仿京东分类列表

    vue基于better-scroll仿京东分类列表

    这篇文章主要为大家详细介绍了vue基于better-scroll仿京东分类列表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • Vue3中Vuex状态管理学习实战示例详解

    Vue3中Vuex状态管理学习实战示例详解

    这篇文章主要为大家介绍了Vue3中Vuex状态管理学习实战示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • Vue使用MD5对前后端进行加密的实现

    Vue使用MD5对前后端进行加密的实现

    前后端分离的项目,遇到了对密码进行加密的情况,在前端或者是在后端加密都是可以的,本文主要介绍了Vue使用MD5对前后端进行加密的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • vue3为什么要用proxy替代defineProperty

    vue3为什么要用proxy替代defineProperty

    这篇文章主要介绍了vue3为什么要用proxy替代defineProperty,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • vue利用v-for嵌套输出多层对象,分别输出到个表的方法

    vue利用v-for嵌套输出多层对象,分别输出到个表的方法

    今天小编就为大家分享一篇vue利用v-for嵌套输出多层对象,分别输出到个表的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue组件实现文字居中对齐的方法

    vue组件实现文字居中对齐的方法

    这篇文章主要为大家详细介绍了vue组件实现文字居中对齐的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 解读Vue-loader的相关知识

    解读Vue-loader的相关知识

    这篇文章主要介绍了解读Vue-loader的相关知识,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • vue-router-link选择样式设置方式

    vue-router-link选择样式设置方式

    这篇文章主要介绍了vue-router-link选择样式设置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue3中使用editor.js的详细步骤记录

    vue3中使用editor.js的详细步骤记录

    富文本编辑器作为直接与用户交互的内容输入生产工具,对大家的项目来说非常重要,下面这篇文章主要给大家介绍了关于vue3中使用editor.js的详细步骤,需要的朋友可以参考下
    2024-01-01

最新评论