使用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 相关文章推荐
$.getJSON在IE下失效的原因分析及解决方法
Jun 16 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
Dec 29 Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
May 26 Javascript
js智能获取浏览器版本UA信息的方法
Aug 08 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
微信小程序 教程之列表渲染
Oct 18 Javascript
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 Javascript
手机浏览器唤起微信分享(JS)
Oct 11 Javascript
Vue3+elementui plus创建项目的方法
Dec 01 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
php实现爬取和分析知乎用户数据
2016/01/26 PHP
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
高效率JavaScript编写技巧整理
2013/08/23 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
微信小程序 wxapp内容组件 icon详细介绍
2016/10/31 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
从零学习node.js之mysql数据库的操作(五)
2017/02/24 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
jQuery返回定位插件详解
2017/05/15 jQuery
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
利用vue开发一个所谓的数独方法实例
2017/12/21 Javascript
详解node.js 下载图片的 2 种方式
2018/03/02 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
vue弹窗组件的实现示例代码
2018/09/10 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
图解javascript作用域链
2019/05/27 Javascript
Python 创建子进程模块subprocess详解
2015/04/08 Python
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
在python 不同时区之间的差值与转换方法
2019/01/14 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
想学画画?python满足你!
2020/12/24 Python
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
怎样写好创业计划书的内容
2014/02/06 职场文书
体育之星事迹材料
2014/05/11 职场文书
工程项目经理任命书
2014/06/05 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
golang正则之命名分组方式
2021/04/25 Golang
OpenCV-Python模板匹配人眼的实例
2021/06/08 Python
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python