位置: 编程技术 - 正文

使用postMesssage()实现跨域iframe页面间的信息传递方法(使用权资产)

编辑:rootadmin

推荐整理分享使用postMesssage()实现跨域iframe页面间的信息传递方法(使用权资产),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:使用权资产,使用灭火器人要站在上风口还是下风口,使用灭火器时要对准火焰的什么部位喷射,使用粗盐热敷十大危害,使用灭火器时要对准火焰的什么部位喷射,使用权资产,使用的拼音,使用灭火器时要对准火焰的什么部位喷射,内容如对您有帮助,希望把文章链接给更多的朋友!

由于web同源策略的限制,当页面使用跨域iframe链接时,主页面与子页面是无法交互的,这对页面间的信息传递造成了不小的麻烦,经过一系列的尝试,最后我发现有以下方法可以实现:

1. 子页面url传参

简单说来就是把所有需要传递的参数加到与主页面同源的url上,将子页面重定向到该url,然后主页面通过iframe的src获取这些参数

过程非常复杂,不建议使用这种方法

2. postMessage()

postMesssage()是HTML5提供的一个基于事件的消息传输API,可以实现跨文本档、多窗口、跨域消息传递。

postMessage(data,origin)方法接受两个参数

1.data:要传递的数据,html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象,然而并不是所有浏览器都做到了这点儿,部分浏览器只能处理字符串参数,所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化,在低版本IE中引用json2.js可以实现类似效果。

使用postMesssage()实现跨域iframe页面间的信息传递方法(使用权资产)

2.origin:字符串参数,指明目标窗口的源,协议+主机+端口号[+URL],URL会被忽略,所以可以不写,这个参数是为了安全考虑,postMessage()方法只会将message传递给指定窗口,当然如果愿意也可以建参数设置为"*",这样可以传递给任意窗口,如果要指定和当前窗口同源的话设置为"/"。

发送消息(子页面)

由于部分浏览器只能处理字符串参数,我们需要先使用JSON.stringfy()将参数转换为字符串,然后再接收页面使用JSON.parse()转换回对象。

接收消息

对于子页面传递过来的参数,我们可以通过监听window的message事件来获取:

window.addEventListener('message', function(e) { var data = JSON.parse(e.data); switch (data.type) { case 1: alert(data.a);break; } }, false);

message事件有几个重要属性

1.data:顾名思义,是传递来的message2.source:发送消息的窗口对象3.origin:发送消息窗口的源(协议+主机+端口号)通过postMesssage()方法和message事件就可以实现跨域传递消息了,需要注意的是,在demo中我们是通过子页面向父页面传递消息,所以使用的是window.parent发送,window接收:

window.parent.postMessage(dataJson, '*');如果是从主页面向子页面就需要对换,使用window发送,window.frames[0]来接收了。

以上这篇使用postMesssage()实现跨域iframe页面间的信息传递方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持积木网。

全屏js头像上传插件源码高清版 本文实例为大家分享了全屏js头像上传插件源码,供大家参考,具体内容如下index.html!DOCTYPEhtmlhtmlheadmetaname="viewport"content="width=device-width"/titleccp/titlelinkhre

基于javascript实现九宫格大转盘效果 本文实例为大家分享了js实现幸运抽奖九宫格大转盘效果,供大家参考,具体内容如下实现代码:!DOCTYPEhtmlhtmlheadmetacharset="utf-8"title九宫格大转盘/titlestyl

基于javascript实现简单的抽奖系统 本文实例为大家分享了js实现简单的抽奖系统,供大家参考,具体内容如下!doctypehtmlhtmllang="en"headmetacharset="gb"title抽奖活动/titlestyle*{margin:0;padding:0;}#ti

标签: 使用权资产

本文链接地址:https://www.jiuchutong.com/biancheng/375990.html 转载请保留说明!

上一篇:js滚动条平滑移动示例代码(js设置滚动条滚到底部)

下一篇:基于javascript实现九宫格大转盘效果(javascript运用)

  • 安保服务税点
  • 工商名称变更后多久网上可以查到记录
  • 个税新规定2021
  • 为临时工购买礼物怎么说
  • 库存股增加为什么资产减少
  • 资产减值准备的计提方法
  • 发票收款人和复核人、收款人规定
  • 电子税务局自然人怎么切换到企业
  • 2019年小规模纳税人增值税优惠
  • 附加税减半征收政策从什么时候开始
  • 高新技术企业分类
  • 清算期间,公司是否可以经营
  • 定额发票不够用可以申请额度要交税吗
  • 企业所得税跨期费用的相关规定
  • 电梯维修增值税
  • 记账时显示期初未建账
  • 已认证未抵扣的进项税如何报税
  • 增值税减免税申报明细表怎么填写1%
  • 开餐费发票要开具数量和单价吗
  • 代建项目增值税税率
  • 个人住房交易50万元
  • 发票丢失罚款标准要看金额吗
  • 农产品增值税核定扣除管理建议
  • 现金日记账对方科目是什么意思
  • 计提外币借款利息
  • 腾讯电脑管家中蓝牙在哪
  • PHP:mb_regex_encoding()的用法_mbstring函数
  • Win10 Build 19043.1266(21H1)更新已知问题汇总
  • php字符串变量
  • 职工宿舍的折旧计入什么科目
  • 公司刚成立多久可以注销
  • PHP:ftp_nb_put()的用法_FTP函数
  • lsass.exe是什么进程
  • 录入财务凭证
  • 生产型企业出口不是自己生产的东西
  • 净资产现金回收率说明什么
  • yii2局部关闭(开启)csrf的验证的实例代码
  • 工业企业应付账款周转率多少合适
  • vue table导出excel
  • spring的文章
  • 花雕典故
  • php array_slice 取出数组中的一段序列实例
  • index.php怎么修改
  • 水利建设基金计算公式
  • mysql5.7.27安装与配置
  • 帝国cms模型
  • 套期保值是什么意思举个例子
  • 高新企业申报条件有哪些
  • 公司如何帮员工补缴社保
  • 营业外收入包括其他业务收入吗
  • 债权人债务重组损益计入什么科目
  • 增值税防伪税控系统
  • 汇算清缴是不是一定要做
  • 当月没有凭证还能报税吗
  • 社保扣费不成功会再次扣费吗
  • 企业收到委托开具发票
  • 赠送购物券的会计处理
  • 原始凭证书写要求
  • 工业企业固定资产投资
  • sql语句中单引号怎么打
  • 一条sql语句搞定一个数据
  • 系统win10安装
  • 电脑没有系统了如何重装系统
  • sccenter.exe - sccenter是什么进程 有什么用
  • windows7睡眠唤醒快捷键
  • win7自动更新失败怎么删除更新启动
  • android app启动过程
  • perl 运算
  • opengl绘制坐标轴
  • JavaScript cookie 跨域访问之广告推广
  • 在node.js中想要监听事件
  • python数据导出
  • gridview行数
  • chrome excel
  • javascript编程基础
  • shell 比较大小
  • 浙江省增值税勾选平台
  • 如何当好一名税务局长
  • 小米之家可以
  • 海淀九所税务局电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设