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


Posted in Javascript onMarch 29, 2016

由于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可以实现类似效果。

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

发送消息(子页面)

function sendMessage(param) {
  var url;
  if (param.url) {
    url = param.url;
  };
  var dataJson = JSON.stringify({

 type:1,

    a: param.c,
    b: param.c,
    c: param.c,
    url: url
  });
  window.parent.postMessage(dataJson, '*');
}

由于部分浏览器只能处理字符串参数,我们需要先使用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:顾名思义,是传递来的message
2.source:发送消息的窗口对象
3.origin:发送消息窗口的源(协议+主机+端口号)
通过postMesssage()方法和message事件就可以实现跨域传递消息了,需要注意的是,在demo中我们是通过子页面向父页面传递消息,所以使用的是window.parent发送,window接收:

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

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

Javascript 相关文章推荐
JavaScript 编程引入命名空间的方法与代码
Aug 13 Javascript
JS 无法通过W3C验证的处理方法
Mar 09 Javascript
JQuery+DIV自定义滚动条样式的具体实现
Jun 25 Javascript
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 Javascript
JS的get和set使用示例
Feb 20 Javascript
jQuery学习笔记之toArray()
Jun 09 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
Mar 06 Javascript
jquery对象与DOM对象转化
Feb 08 Javascript
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
详解Vue SPA项目优化小记
Jul 03 Javascript
jQuery中实现text()的方法
Apr 04 jQuery
vue实现登陆页面开发实践
May 30 Vue.js
js滚动条平滑移动示例代码
Mar 29 #Javascript
JavaScript头像上传插件源码分享
Mar 29 #Javascript
js解决movebox移动问题
Mar 29 #Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 #Javascript
分析js闭包引起的事件注册问题
Mar 29 #Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
Mar 29 #Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 #Javascript
You might like
基于mysql的bbs设计(一)
2006/10/09 PHP
关于php连接mssql:pdo odbc sql server
2011/07/20 PHP
新浪微博API开发简介之用户授权(PHP基础篇)
2011/09/25 PHP
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
My Desktop :) 桌面式代码
2008/12/29 Javascript
JavaScript表达式:URL 协议介绍
2013/03/10 Javascript
Script标签与访问HTML页面详解
2014/01/10 Javascript
当jQuery1.7遇上focus方法的问题
2014/01/26 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
JS仿百度自动下拉框模糊匹配提示
2016/07/25 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
原生JS实现小小的音乐播放器
2017/10/16 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
vue组件系列之TagsInput详解
2020/05/14 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
[43:03]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
Python使用Pandas对csv文件进行数据处理的方法
2019/08/01 Python
python如何写出表白程序
2020/06/01 Python
Python自动化测试基础必备知识点总结
2021/02/07 Python
python和opencv构建运动检测器的实现
2021/03/03 Python
个性化皮包、小袋、生活配件:Mon Purse
2019/03/26 全球购物
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python