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

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

相关文章

  • 详解mpvue小程序中怎么引入iconfont字体图标

    详解mpvue小程序中怎么引入iconfont字体图标

    这篇文章主要介绍了详解mpvue小程序中怎么引入iconfont字体图标,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • vite分目录打包及去掉默认的.gz 文件的操作方法

    vite分目录打包及去掉默认的.gz 文件的操作方法

    Vite在默认配置下会将资源打包至assets文件夹并添加哈希值,不同于Webpack的多文件夹存放方式,Vite只对public文件夹不进行打包处理,而Webpack不打包public和static文件夹,本文介绍vite分目录打包及去掉默认的.gz 文件的操作方法,感兴趣的朋友一起看看吧
    2024-09-09
  • Vue.js中兄弟组件之间互相传值实例

    Vue.js中兄弟组件之间互相传值实例

    本篇文章主要介绍了Vue.js中兄弟组件之间互相传值实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • 详解Vue3.0 前的 TypeScript 最佳入门实践

    详解Vue3.0 前的 TypeScript 最佳入门实践

    这篇文章主要介绍了详解Vue3.0 前的 TypeScript 最佳入门实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • vue如何在vue.config.js文件中导入模块

    vue如何在vue.config.js文件中导入模块

    这篇文章主要介绍了vue如何在vue.config.js文件中导入模块问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • vue 配置多页面应用的示例代码

    vue 配置多页面应用的示例代码

    这篇文章主要介绍了vue 配置多页面应用的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • axios+vue请求时携带cookie的方法实例

    axios+vue请求时携带cookie的方法实例

    做项目时遇到一个需求,后端需要在接口请求时,对用户登陆状态进行判断,需要在请求时携带Cookie,下面这篇文章主要给大家介绍了关于axios+vue请求时携带cookie的相关资料,需要的朋友可以参考下
    2022-09-09
  • 详解Vue依赖收集引发的问题

    详解Vue依赖收集引发的问题

    这篇文章主要介绍了Vue依赖收集引发的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue中__ob__: Observer的踩坑记录

    vue中__ob__: Observer的踩坑记录

    这篇文章主要介绍了vue中__ob__: Observer的踩坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue3常用的指令之v-bind和v-on指令用法

    vue3常用的指令之v-bind和v-on指令用法

    vue的v-on与v-bind,v-on就是用于绑定事件的,下面这篇文章主要给大家介绍了关于vue3常用的指令之v-bind和v-on指令用法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12

最新评论