位置: IT常识 - 正文

vue中iframe的使用(vuex iframe)

编辑:rootadmin
vue中iframe的使用

推荐整理分享vue中iframe的使用(vuex iframe),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue iframe onload,vue中iframe如何传值,iframe嵌入vue组件,vue frame,vuex iframe,vuex iframe,vue iframe onload,vuex 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').contentWindowCDM跨域vue中iframe的使用(vuex iframe)

如果你设置的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() } })
本文链接地址:https://www.jiuchutong.com/zhishi/295903.html 转载请保留说明!

上一篇:前端原生Html免费模板网站总结(带网址)(前端 原生)

下一篇:Edge DEV 侧边栏没有Chat的解决办法。(edge 状态栏)

  • 小天才电话手表怎么关机(小天才电话手表售后服务电话)

    小天才电话手表怎么关机(小天才电话手表售后服务电话)

  • 高德地图怎么设置车牌号避开限行(高德地图怎么设置多个目的地)

    高德地图怎么设置车牌号避开限行(高德地图怎么设置多个目的地)

  • 苹果屏幕使用时间不准(苹果屏幕使用时间准确吗)

    苹果屏幕使用时间不准(苹果屏幕使用时间准确吗)

  • 苹果11没有正方形拍照吗(苹果11没有正方形吗)

    苹果11没有正方形拍照吗(苹果11没有正方形吗)

  • qq音乐包和豪华vip区别(qq音乐的豪华绿钻和音乐包)

    qq音乐包和豪华vip区别(qq音乐的豪华绿钻和音乐包)

  • 微信运动看不见对方了是什么原因(微信运动看不见了是不是被删好友了)

    微信运动看不见对方了是什么原因(微信运动看不见了是不是被删好友了)

  • 抖音视频卡顿怎么修复(抖音视频卡顿怎么变流畅)

    抖音视频卡顿怎么修复(抖音视频卡顿怎么变流畅)

  • 无损音乐有必要吗(无损音乐有什么好处)

    无损音乐有必要吗(无损音乐有什么好处)

  • 闲鱼拍下最迟发货时间(闲鱼拍下最晚什么时候发货)

    闲鱼拍下最迟发货时间(闲鱼拍下最晚什么时候发货)

  • oppo屏幕无法滑动(oppo手机屏幕无法滑动)

    oppo屏幕无法滑动(oppo手机屏幕无法滑动)

  • neo3屏幕发红(iqoo neo5屏幕泛红)

    neo3屏幕发红(iqoo neo5屏幕泛红)

  • 微信图片自动清理怎么关闭(微信图片自动清理如何设置)

    微信图片自动清理怎么关闭(微信图片自动清理如何设置)

  • 苹果11美颜相机怎样设置(苹果11美颜相机广角怎么用)

    苹果11美颜相机怎样设置(苹果11美颜相机广角怎么用)

  • 华为p40有没有红外功能(华为p40有没有红外发射功能)

    华为p40有没有红外功能(华为p40有没有红外发射功能)

  • 电脑网络连接不可用显示红叉(电脑网络连接不稳定是怎么回事)

    电脑网络连接不可用显示红叉(电脑网络连接不稳定是怎么回事)

  • ipad激活和未激活区别(ipad激活过和未激活区别)

    ipad激活和未激活区别(ipad激活过和未激活区别)

  • qq状态显示忙碌是啥意思(qq状态显示忙碌怎么办)

    qq状态显示忙碌是啥意思(qq状态显示忙碌怎么办)

  • 什么是有锁卡贴机(有锁卡贴怎么使用)

    什么是有锁卡贴机(有锁卡贴怎么使用)

  • 手机2g网络是什么原因(手机2g网络是什么原因有话费)

    手机2g网络是什么原因(手机2g网络是什么原因有话费)

  • 电脑键盘x号怎么打出来(电脑键盘x怎么输入)

    电脑键盘x号怎么打出来(电脑键盘x怎么输入)

  • 小米手环4怎么打开音乐(小米手环4怎么恢复出厂设置)

    小米手环4怎么打开音乐(小米手环4怎么恢复出厂设置)

  • 转转实名认证怎么解除(转转实名认证怎么改绑)

    转转实名认证怎么解除(转转实名认证怎么改绑)

  • vivo机器人叫什么(vivo的机器人叫啥)

    vivo机器人叫什么(vivo的机器人叫啥)

  • 和日期相关的代码和bug——一道力扣题中的小发现(跟日期有关的名字)

    和日期相关的代码和bug——一道力扣题中的小发现(跟日期有关的名字)

  • 房屋租赁如何开增值税专用发票
  • 提供劳务代扣的发票
  • 购进固定资产的安装费计入原值吗?
  • 捐赠的费用放在什么科目
  • 加油票抬头开错可以更换吗
  • 小规模进项负数发票需要认证吗
  • 加计抵减怎么入账
  • 国库存款利息收入计入哪个预算收入科目
  • 免费样品销售给客户计入什么科目
  • 公司注册的费用记什么科目
  • 三证合一之后还有税务登记证吗
  • 小规模纳税人收入账务处理
  • 小企业开发票了还能零报税吗?
  • 水利基金计提比例
  • 无形资产租赁税率多少
  • 物业公司安装监控
  • 跨年度主营业务收入错账调整
  • 当月没有进项税额抵扣怎么办
  • 汇兑结算包括
  • 上年计提的费用往来,能冲回吗
  • 坏账准备年末余额怎么计算
  • 跨境电商的账务怎么做
  • arp防火墙是什么意思
  • 进程core
  • 单位话费谁负责交
  • 违约金没有写按什么算
  • 什么票据行为是合法的
  • php socket_read
  • 分公司不纳入合并
  • laravel app接口
  • 增量留抵税额是
  • transformer中的token
  • 离职补偿金可以拖欠么
  • 子公司计入长期股权投资吗
  • 公章变更需要到哪个部门
  • SQL Server Native Client下载 SQL Server Native Client安装方法
  • 欠款收不回来了会计分录
  • 对企业发票的监管
  • 库存现金怎么做预算会计
  • 销售方销售返利单独开具
  • 一般纳税人第一次逾期申报处罚吗
  • 无法收回离职员工合法吗
  • 财务费用怎么用
  • 纳税申报表多缴了怎么办
  • 政府无偿划拨土地如何摊销
  • 待处理财产损益会计分录
  • 出口货物发生退运损失由外贸承担还是厂家
  • 购入的无形资产加计扣除怎么算
  • 开票操作流程是什么
  • mysql两种安装方式
  • mysql分区分表原理
  • sql触发器语句
  • 数据库汉字转拼音
  • mysqldump -w
  • 分区时把磁盘格式化了,如何恢复
  • windows Server 2008配置IE使用代理操作步骤
  • nano linux
  • 硬盘读盘慢修复
  • winton
  • win732位系统怎么装
  • windows超级管理员默认密码
  • linux防火墙命令大全
  • linux重复命令
  • win8无线网络受限 重连又好了
  • win10 20h2怎么装
  • win7旗舰版系统激活密钥
  • jquery实现复选框全选
  • 测试下载速度很快,实际下载很慢
  • 用css滤镜实现的代码
  • js document.cookie
  • canvas+javascript
  • jquery 鼠标
  • js无限极分类
  • 天津国税局电子税务局
  • 返利是否合法
  • 河北电子税务局网上登录
  • 建设工程勘察设计单位可跨部门跨地区承揽勘察设计业务
  • 工商局税务局合并了吗
  • 目前我国现行法规规定的职业病范围共有几大类几种
  • 卖钢材交哪些税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设