vue中iframe的使用及说明

目录
  • 关于iframe的使用
    • 获取iframe里面的内容
    • CDM跨域
  • 使用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') {
          。。。。。。
        }
      },

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

赞 (0)

相关推荐

  • vue中如何通过iframe方式加载本地的vue页面

    目录 通过iframe方式加载本地的vue页面 iframe方式加载本地的vue页面的第一种方法 iframe方式加载本地的vue页面的第二种方法 iframe方式加载本地的vue页面的第三种方法 关于iframe在vue中应用问题 iframe的宽高无法根据内容撑开 通过iframe方式加载本地的vue页面 也是在实际的项目中碰到一个奇葩的需求,用vue,居然还要用到iframe,真是脑壳大,试了好多次最后才找到了正确的方法. 总共有三种方法吧 iframe方式加载本地的vue页面的第一种方法

  • vue中使用iframe嵌入网页,页面可自适应问题

    vue中使用iframe嵌入网页,页面可自适应问题

    目录 使用iframe嵌入网页,页面可自适应 vue iframe高度自适应 实用 实时刷新iframe高度变化 iframe高度有变的时候通知父级 iframe高度有变的时候直接修改iframe高度 使用iframe嵌入网页,页面可自适应 在项目中遇到要嵌入第三方网页的需求,因为没有同第三方页面交互的需求,只需展示即可,所以最终决定使用 iframe 将第三方的网页嵌入到系统中,并且做到自适应效果. 考虑到以后可能会增加嵌入页面的数量,故而封装成组件,供以后复用: 上图为系统整体结构图,需要在

  • vue中iframe使用以及结合postMessage实现跨域通信

    目录 使用场景 需求 iframe使用 基本使用 常用属性 iframe高度自适应 获取iframe的内容 同域下获取父级/子级内容 iframe跨域 postMessage通信 在vue中使用 使用场景 需求 在一个H5项目的页面中以url的方式嵌入另一个项目的页面.(不得不使用iframe) 而为了兼容移动端api(封装的一个移动端api,iframe内嵌页面不生效),需要实现父子页面的通信 (使用postMessage). iframe使用 基本使用 直接在页面嵌套iframe标签指定sr

  • Vue中使用iframe踩坑问题记录 iframe+postMessage

    Vue中使用iframe踩坑问题记录 iframe+postMessage

    目录 使用iframe踩坑记录 iframe+postMessage 1.iframe的初始高度问题 2.postMessage的实现 iframe使用postMessage传值addEventListener未接收到却收到webpackwarning问题 bug如下 问题解决 使用iframe踩坑记录 iframe+postMessage 需求:最近在写一个博客的功能模块,技术栈是单独选择的vuepress,完成后想要融合到一个vue工程里,考虑到后期维护的问题,就通过iframe将vuepr

  • vue与iframe之间的交互方式(一看就会)

    vue与iframe之间的交互方式(一看就会)

    目录 vue与iframe之间的交互 子页面向父页面传值 父页面向子页面传值 vue与html之间iframe交互 1.父级调用子级ifram中的方法 2.子级iframe(html 或者vue)调用父级html中的方法 3.vue中调用子级iframe html 中的方法 4.在iframe中调用vue中的方法 vue与iframe之间的交互 首先介绍一下使用背景,前端采用html单页面引用vue的方式(逼不得已这么做,否则直接用vue不香嘛),废话不多说 页面大致是这样,现在需要做的是在if

  • Vue中iframe 结合 window.postMessage 实现跨域通信

    目录 一.前言 二.应用场景 2.1 嵌入页面 2.2 postMessage 实现父子页面通信 2.3 子页面向父页面传值 2.4父页面代码: 一.前言 什么是iframe? iframe 元素会创建包含另外一个文档的内联框架(即行内框架). 什么是postMessage? window.postMessage() 方法可以安全地实现跨源通信.通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同协议(通常为https),端口号(443为https的默认值),以及主机 (两个页面的模数

  • vue中iframe的使用及说明

    目录 关于iframe的使用 获取iframe里面的内容 CDM跨域 使用iframe的总结 代码展示 关于iframe的使用 iframe在同域时能自由操作iframe和父框架的内容(DOM),在跨域时可以实现页面跳转. <iframe id="iframe" :src="iframeSrc" style="height: calc(100% - 50px)" width="100%" frameborder=&quo

  • vue中解决拖拽改变存在iframe的div大小时卡顿问题

    写在最前 针对于在vue中实现拖拽改变两左右个div大小的方式,请查看上一篇文章<vue中实现拖动调整左右两侧div的宽度>.此文章主要针对于实际应用中需要拖拽改变大小的组件中使用iframe框架时存在明显卡顿的问题,比如这样,右侧div中使用了一个iframe组件,导致实际操作中出现两个问题,一个是拖不动,另外一个是无法根据鼠标移动,快速响应,甚至在监听鼠标的按下和松开事件上都有明显的卡顿问题.如果去除右侧iframe框架,则没有问题. 有iframe情况 无iframe情况 问题原因&am

  • 在vue中实现嵌套页面(iframe)

    vue中嵌套iframe,将要嵌套的文件放在static下面.src可以使用相对路径,也可使用服务器根路径http:localhost:8088/- <iframe src="../../static/plusPro.html" width="1200" height="300" frameborder="0" scrolling="auto"style="position:absolute

  • vue中内嵌iframe的src更新页面未刷新问题及解决

    目录 vue内嵌iframe的src更新页面未刷新 原因 解决 iframe的src指向的内容不刷新的解决方法之一 总结 vue内嵌iframe的src更新页面未刷新 vue中,系统使用iframe内嵌了其他系统的页面,iframe的src修改了,但是iframe内部页面内容未更新,也未请求接口. 原因 iframe的src中如果带hash #,src改变是不会刷新的. 解决 方式一:可以在 # 号前加一个随机数或者时间戳,但这种方式会改变url:方式二:在组件上加key,强制刷新页面. 方式一

  • 聊聊Vue 中 title 的动态修改问题

    由于之前的 Vue 项目打包成果物一直是嵌入集成平台中,所以一直没有关注过项目的 title.直到最近,突然有个需求,要求点击按钮在集成平台外新开一个页面,此时我才发现,原来我的项目的 title 一直是万年不变的 vue-project.理所应当的,这个问题被测试爸爸提了一个大大的缺陷. 犯了错的我赶紧解决这个问题,但是经过一段时间的摸索,我却发现,这一个小小的问题,却有着很多不同的解法. 首先,毫无疑问的是,我们应该使用 document.title 方法通过 DOM 操作来修改 title

  • 在VUE中实现文件下载并判断状态的方法

    新增JS页面 axiosExport.JS // Axios拦截请求并实现下载 import axios from 'axios' // download url export const downloadUrl = (url) => { console.log(url) let iframe = document.createElement('iframe') iframe.style.display = 'none' iframe.src = url iframe.onload = func

  • vue与iframe之间的信息交互的实现

    说一下我的使用场景:在vue中使用百度地图,需要使用离线地图 先上代码 然后细细品 第一张图 第二张图 第三张图 1.首先iframe 引入你要嵌套的地址 2 .通过vue中给出的ref 来获取 ifarme的DOM元素 如图中的 this.iframeWin = this.$refs.iframe.contentWindow [拿到iframe的window对象] 3.vue如何向iframe内传送信息 可以通过H5新属性 postmessage 注释:[postMessage是有点类似于UD

随机推荐