位置: IT常识 - 正文

vue内嵌iframe跨域通信(vue页面嵌套iframe vue页面)

编辑:rootadmin
vue内嵌iframe跨域通信

推荐整理分享vue内嵌iframe跨域通信(vue页面嵌套iframe vue页面),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue iframe 跨域,vue页面嵌套iframe vue页面,vuex iframe,vue如何加跨域处理,vue页面嵌套iframe vue页面,vue使用iframe跳转别的页面,vue 嵌入iframe,vue页面嵌套iframe vue页面,内容如对您有帮助,希望把文章链接给更多的朋友!

1、Vue组件中如何引入iframe?

2、vue如何获取iframe对象以及iframe内的window对象?

3、vue如何向iframe内传送信息?

4、iframe内如何向外部vue发送信息?

一、Vue组件中如何引入iframe?

直接通过添加iframe标签,src属性绑定data中的src,第一步引入就完成了

<template> <div class="act-form"> <iframe :src="src"></iframe> </div></template><script>export default { data () { return { src: '你的src' } }}</script>vue内嵌iframe跨域通信(vue页面嵌套iframe vue页面)

二、vue如何获取iframe对象以及iframe内的window对象?

获取iframe的window对象,因为只有拿到这个对象才能向iframe中传值

<template> <div class="act-form"> <iframe :src="src" ref="iframe"></iframe> </div></template><script>export default { data () { return { src: '你的src' } }, mounted () { // 这里就拿到了iframe的对象 console.log(this.$refs.iframe) // 这里就拿到了iframe的window对象 console.log(this.$refs.iframe.contentWindow) }}</script>

三、vue如何向iframe内传送信息?

通过postMessage,具体关于postMessage是什么,自己去google,   我的理解postMessage是有点类似于UDP协议,就像短信,是异步的,你发信息过去,但是没有返回值的,只能内部处理完成以后再通过postMessage向外部发送一个消息,外部监听message   为了让postMessage像TCP,为了体验像同步的和实现多通信互不干扰,特别制定的message结构如下

{ cmd: '命令', params: { '键1': '值1', '键2': '值2' }}

 通过cmd来区别这条message的目的

具体代码如下

<template> <div class="act-form"> <iframe :src="src" ref="iframe"></iframe> <div @click="sendMessage">向iframe发送信息</div> </div></template><script>export default { data () { return { src: '你的src', iframeWin: {} } }, methods: { sendMessage () { // 外部vue向iframe内部传数据 this.iframeWin.postMessage({ cmd: 'getFormJson', params: {} }, '*') }, }, mounted () { // 在外部vue的window上添加postMessage的监听,并且绑定处理函数handleMessage window.addEventListener('message', this.handleMessage) this.iframeWin = this.$refs.iframe.contentWindow }, handleMessage (event) { // 根据上面制定的结构来解析iframe内部发回来的数据 const data = event.data switch (data.cmd) { case 'returnFormJson': // 业务逻辑 break case 'returnHeight': // 业务逻辑 break } }}</script>

四、iframe内如何向外部vue发送信息?

现在通过单击‘向iframe发送信息’这个按钮,从外部vue中已经向iframe中发送了一条信息

{ cmd: 'getFormJson', params: {}}

那么iframe内部如何处理这个信息?

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>iframe Window</title> <style> body { background-color: #D53C2F; color: white; } </style></head><body> <h1>Hello there, i'm an iframe</h1> <script> // 向父vue页面发送信息 window.parent.postMessage({ cmd: 'returnHeight', params: { success: true, data: document.body.scrollHeight + 'px' } }, '*'); // 接受父页面发来的信息 window.addEventListener("message", function(event){ var data = event.data; switch (data.cmd) { case 'getFormJson': // 处理业务逻辑 break; } }); </script></body></html>

至此为止,内部的收发信息和外部的收发信息都已解决!

下面是完整代码:

<template> <div class="act-form"> <div class="nav"> <img src="https://www.yuucn.com/wp-content/uploads/2023/04/1682042997-37fa8c727f1f06d.png" @click="back()"> <div class="title">报名</div> </div> <div class="iframe-out"> <iframe :src="src" ref="iframe" @load="iframeLoad"></iframe> </div> <div v-if="isLoaded" class="send-form"><div class="send" @click="sendMessage()">提交</div></div> </div></template><!-- Add "scoped" attribute to limit CSS to this component only --><style lang="sass" rel="stylesheet/sass"> @import "style.scss";</style><script>import { Toast, Indicator } from 'mint-ui'import api from '@/utils/api'export default { data () { return { src: '', iframeWin: null, isLoaded: false } }, created () { let matchFamily = this.$store.state.matchFamily this.src = process.env.BASE_URL + '/matches/' + matchFamily.match.id + '/act/' + matchFamily.act.id + '/joinweb?token=' + this.$store.state.token }, mounted () { window.addEventListener('message', this.handleMessage) this.iframeWin = this.$refs.iframe.contentWindow // 开启加载动画 Indicator.open({ text: '努力加载中...', spinnerType: 'triple-bounce' }) }, methods: { back () { this.$router.push('/actIntro') }, sendMessage () { this.iframeWin.postMessage({ cmd: 'getFormJson', params: {} }, '*') }, iframeLoad () { // 关闭加载动画 Indicator.close() }, async handleMessage (event) { const data = event.data switch (data.cmd) { case 'returnFormJson': if (data.params.success) { // 调用报名方法 await this.enroll(data.params.data) } else { console.log('returnFormJson失败') console.log(data.params) } break case 'returnHeight': if (data.params.success) { this.$refs.iframe.height = data.params.data this.isLoaded = true } break } }, async enroll (data) { let matchFamily = this.$store.state.matchFamily let result = await api.enroll(matchFamily.match.id, matchFamily.act.id, data) if (result.success) { if (result.data.status === 'no_pay') { // 更新缓存 let resultMatch = await api.match(matchFamily.match.id, {}) if (resultMatch.success) { this.$store.commit('SET_CURRENT_MATCH', resultMatch.data) } Toast({ message: '报名成功', position: 'bottom' }) this.$router.push('/match/' + matchFamily.match.id + '/mdetail') } else { console.log('需要跳转到支付页面') } } } }}</script>
本文链接地址:https://www.jiuchutong.com/zhishi/297404.html 转载请保留说明!

上一篇:js查找数组中符合条件的元素(js查找数组所有符合条件数据)

下一篇:【蓝桥杯真题】当蓝桥杯开设Web组之后,对几题能拿省一?(蓝桥杯真题c语言)

  • 想涨价?企业请get这4个技能,快速捕获消费者的心(想涨价?企业请客怎么说)

    想涨价?企业请get这4个技能,快速捕获消费者的心(想涨价?企业请客怎么说)

  • vivo浏览器下载的视频是在哪个文件夹(vivo浏览器下载的视频删除了怎么恢复)

    vivo浏览器下载的视频是在哪个文件夹(vivo浏览器下载的视频删除了怎么恢复)

  • 滴滴多少个好评升一分(滴滴多少好评涨一分)

    滴滴多少个好评升一分(滴滴多少好评涨一分)

  • 苹果11和11 pro区别(苹果11和11pro区别在哪里)

    苹果11和11 pro区别(苹果11和11pro区别在哪里)

  • 如何关闭qq下拉功能(如何关闭qq下拉抢红包)

    如何关闭qq下拉功能(如何关闭qq下拉抢红包)

  • 微信发送键变灰色(微信发送键变灰了怎么办)

    微信发送键变灰色(微信发送键变灰了怎么办)

  • qq哪些气泡是免费(qq里面哪些气泡是免费的又好看)

    qq哪些气泡是免费(qq里面哪些气泡是免费的又好看)

  • 酷狗音乐包下载的音乐可以永久听吗(酷狗音乐包下载到U盘是永久的吗)

    酷狗音乐包下载的音乐可以永久听吗(酷狗音乐包下载到U盘是永久的吗)

  • 华为手机出厂有贴膜吗(华为手机出厂有瑕疵)

    华为手机出厂有贴膜吗(华为手机出厂有瑕疵)

  • 2.0音响和2.1音响的区别(2.0音响和2.1音响 影视)

    2.0音响和2.1音响的区别(2.0音响和2.1音响 影视)

  • 打电话对方老关机怎么回事(打电话对方总是关机是不是被拉黑了)

    打电话对方老关机怎么回事(打电话对方总是关机是不是被拉黑了)

  • 华为p30支持红外遥控吗(华为p30支持红外遥控器吗)

    华为p30支持红外遥控吗(华为p30支持红外遥控器吗)

  • 怎么关闭淘宝内部耗电运行(淘宝如何关闭我的页面内容)

    怎么关闭淘宝内部耗电运行(淘宝如何关闭我的页面内容)

  • 华为P30pro锁屏步数如何关闭(华为p30pro锁屏步数怎么设置)

    华为P30pro锁屏步数如何关闭(华为p30pro锁屏步数怎么设置)

  • 怎么为标题添加脚注(怎么为标题添加方框)

    怎么为标题添加脚注(怎么为标题添加方框)

  • 计算机off键是什么键(计算机上off键的功能是什么)

    计算机off键是什么键(计算机上off键的功能是什么)

  • 手机修改dns提高网速(手机修改dns提高性能)

    手机修改dns提高网速(手机修改dns提高性能)

  • oppoa5耳机模式怎么解除(oppoa5耳机模式怎么开)

    oppoa5耳机模式怎么解除(oppoa5耳机模式怎么开)

  • qq信息超时怎么撤回(扣扣消息超时怎么撤回)

    qq信息超时怎么撤回(扣扣消息超时怎么撤回)

  • 小米授权体验店是什么(小米授权体验店是正品吗)

    小米授权体验店是什么(小米授权体验店是正品吗)

  • vivox27带面部解锁吗(vivox27不可以面部解锁吗?)

    vivox27带面部解锁吗(vivox27不可以面部解锁吗?)

  • 陌陌现在怎么不能视频聊天了(陌陌现在怎么不能发红包了)

    陌陌现在怎么不能视频聊天了(陌陌现在怎么不能发红包了)

  • 陌陌距离前面黄点是什么意思(陌陌距离显示灰色是什么意思)

    陌陌距离前面黄点是什么意思(陌陌距离显示灰色是什么意思)

  • word目录怎么自动生成(word目录怎么自动生成左对齐)

    word目录怎么自动生成(word目录怎么自动生成左对齐)

  • 7p怎么设置来电闪光(iphone7p怎么设置来电铃声)

    7p怎么设置来电闪光(iphone7p怎么设置来电铃声)

  • 路由器怎么才能设置成交换机?(路由器怎么才能用)

    路由器怎么才能设置成交换机?(路由器怎么才能用)

  • 选 择 器(选择器优先级)

    选 择 器(选择器优先级)

  • 房地产企业什么时候开具正式发票
  • 视同销售行为涉税处理?
  • 专项资金支出流程
  • 社保可以抵扣什么税
  • 已经开了发票需要退款怎么处理
  • 开票名称开错了
  • 其他收益是什么类
  • 电子税务局在哪里看财务报表
  • 2019年大写二o一九
  • 开票报税是什么意思
  • 收到投资款怎么做会计凭证
  • 企业自用房要交契税吗
  • 全年一次性奖金计税方式
  • 跨年的增值税普通发票可以入账吗
  • 小规模纳税人实行简易征收办法
  • 加盟费没有发票怎么做账
  • 投资利润率的计算结果不受建设期的长短
  • 金税三期上线后的税收征管问题
  • 高薪补贴需要交什么税
  • 以前年度应扣未扣支出
  • 怎么在bios设置启动项
  • 回收站已损坏 是否清空该驱动,点鼠标无法操作
  • php模板引擎语法
  • 开机自动连接宽带怎么设置w11
  • 补缴社保公积金申请书怎么写
  • auepuc.exe是什么软件
  • 所有者权益会计科目借贷方向
  • PHP:mcrypt_enc_is_block_algorithm()的用法_Mcrypt函数
  • 东京塔的意义
  • PHP:imagegammacorrect()的用法_GD库图像处理函数
  • thinkphp 登录功能
  • 施工企业成本费用有哪些方面构成
  • 快速搞懂Pinia及数据持久化存储(详细教程)
  • 如何用python制作人工智能
  • vue初始化命令
  • orb特征点匹配
  • 原始凭证一般没有
  • 以前年度损益调整是什么意思
  • Linux下socket实现网页抓取 Unicorn 博客频道 CSDN.NET
  • 商业银行贷款的资本充足率
  • 股东出资不足需要赔偿吗
  • 转让全部探明矿权合法吗
  • 高新技术研发的重要性
  • 织梦cms不更新了吗
  • mysql 触发器
  • BootStrap--selectpicker的使用
  • 购买仪器属于什么费用
  • 经营许可证需要多久时间
  • 固定资产清理时增值税怎么处理
  • 生产自己的产品
  • 印花税的其他凭证指的是什么
  • 库存商品对外销售会计分录
  • 长期待摊费用如何评估
  • 期间费用明细表必须填吗
  • 在建工程转固规定
  • 电子版银行回单
  • 购进中央空调可以抵税吗
  • mysql中的字符串函数
  • mysql的随机函数
  • windows xp和windows 2000
  • 在ubuntu上安装gcc
  • win10如何删除右键菜单选项
  • xp系统安装版
  • win8设置宽带连接
  • windows网络诊断在哪
  • win10系统激活后怎么关闭
  • 简单的安卓代码
  • Python函数中仅允许有一条return语句
  • jquery编写Tab选项卡滚动导航切换特效
  • 仿京东商城源码
  • 企业年金企业账户部分可以提取么
  • 地税局 要官
  • 广东省地方税务局
  • 河源市人民医院上班时间
  • 移动手机话费代扣
  • 通讯费报销会计分录
  • 货车可申请停保吗
  • ca认证登录不了
  • 请问报考国家税务局难吗
  • 提供劳务者受害责任纠纷赔偿案例
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设