使用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 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
Jquery 学习笔记(一)
Oct 13 Javascript
JS localStorage实现本地缓存的方法
Jun 22 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
Jul 01 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
Oct 31 Javascript
JS实现的页面自定义滚动条效果
Oct 26 Javascript
在html中引入外部js文件,并调用带参函数的方法
Oct 31 Javascript
JS button按钮实现submit按钮提交效果
Nov 01 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
微信小程序三级联动选择器使用方法
May 19 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
Jun 19 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 OPCode缓存 APC详细介绍
2010/10/12 PHP
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
php使用APC实现实时上传进度条功能
2015/10/26 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
PHP dirname简单使用代码实例
2020/11/13 PHP
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
javascript dom追加内容实现示例
2013/09/21 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
wxpython中利用线程防止假死的实现方法
2014/08/11 Python
Python访问MySQL封装的常用类实例
2014/11/11 Python
python通过socket查询whois的方法
2015/07/18 Python
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
使用Django连接Mysql数据库步骤
2019/01/15 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
python函数与方法的区别总结
2019/06/23 Python
linux环境中没有网络怎么下载python
2019/07/07 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
CSS3媒体查询Media Queries基础学习教程
2016/02/29 HTML / CSS
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
函授自我鉴定
2013/11/06 职场文书
煤矿机修工岗位职责
2014/02/07 职场文书
《晏子使楚》教学反思
2014/02/08 职场文书
可口可乐广告词
2014/03/20 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
大连导游词
2015/02/12 职场文书
生活小常识广播稿
2015/08/19 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python