使用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 相关文章推荐
北京奥运官方网站幻灯切换效果flash版打包下载
Jan 30 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
Aug 14 Javascript
不使用浏览器运行javascript代码的方法
Jul 24 Javascript
JavaScript语言核心数据类型和变量使用介绍
Aug 23 Javascript
Array 重排序方法和操作方法的简单实例
Jan 24 Javascript
js给selected添加options的方法
May 06 Javascript
基于js实现投票的实例代码
Aug 04 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 Javascript
Vue.js系列之项目结构说明(2)
Jan 03 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
Feb 07 Javascript
js使用xml数据载体实现城市省份二级联动效果
Nov 08 Javascript
vuex页面刷新后数据丢失的方法
Jan 17 Javascript
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
PHP实现多图片上传类实例
2014/07/26 PHP
php+lottery.js实现九宫格抽奖功能
2019/07/21 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
超清晰的document对象详解
2007/02/27 Javascript
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
JavaScript 语法集锦 脚本之家基础推荐
2009/11/15 Javascript
简单的jquery拖拽排序效果实现代码
2011/09/20 Javascript
jquery 操作两个select实现值之间的互相传递
2014/03/07 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
jQuery插件pagination实现分页特效
2015/04/12 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
jQuery 生成svg矢量二维码
2016/08/09 Javascript
Bootstrap中data-target 到底是什么
2017/02/14 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
原生JS实现烟花效果
2020/03/10 Javascript
JS XMLHttpRequest原理与使用方法深入详解
2020/04/30 Javascript
[01:37]DOTA2超级联赛专访ChuaN 传奇般的电竞之路
2013/06/19 DOTA
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
python raise的基本使用
2020/09/10 Python
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
个人现实表现材料
2014/02/04 职场文书
前台文员职责范本
2014/03/07 职场文书
现金出纳岗位职责
2014/03/15 职场文书
2014年教师工作总结
2014/11/10 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
高三数学教学反思
2016/02/18 职场文书