使用iframe+postMessage实现页面跨域通信的示例代码


Posted in HTML / CSS onJanuary 14, 2020

通常情况下,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https),端口号(443为https的默认值),以及主机时,这两个脚本才能相互通信。而在实际项目开发过程中,经常会利用iframe在一个父页面中嵌入另外一个子页面,或者在一个父页面中弹出另一个页面,由于同源策略的限制,父子页面之间的脚本无法实现通信,而使用postMessage方法就实现了父子页面之间的跨域信息传递。

语法:

otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow:其他页面的引用,例如,iframe的contentWindow属性,或者执行window.open返回的窗口对象。

message:将要传递到另一个页面的数据(可以不受限制的将数据对象安全的传送给目标窗口而无需自己序列化,原因是因为采用了结构化克隆算法)。

targetOrigin:通过窗口的origin属性来指定哪些窗口能接收到消息事件,其值可以是一个字符串"*"(表示无限制)或者一个Url。只有当目标窗口的协议、主机地址、端口号和targetOrigin完全匹配时,目标窗口才会收到message信息。为了防止信息泄露,通常情况下都会指定特定的url。

transfer:可选参数。

使用方法:

1.父页面:(url为http://www.b.com/main.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父页面</title>
</head>
<body>
    <iframe id="child" src="http://www.a.com/iframepage.html"></iframe>
    <script>
        window.onload = function(){
            document.getElementById("child").contentWindow.postMessage("主页面传递的消息","http://www.a.com/iframepage.html")
        }
        window.addEventListener('message', function(event){  //父获取子传递的消息
            if(event.origin == "http://www.a.com"){
                //可以在这里做一些逻辑操作
            }
        }, false)
    </script>
</body>
</html>

2.子页面(url为http://www.a.com/iframepage.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子页面</title>
</head>
<body>
    <div>这里是子页面</div>
    <script>
        window.addEventListener('message', function(event){
           if(event.origin == "http://www.b.com"){
                //可以在这里做一些操作
                top.postMessage("子页面收到父页面传递来的消息", 'http://www.b.com/main.html')//子页面向父页面传递消息
           }
        }, false);
    </script>
</body>
</html>

postMessage方法被调用时,会在所有页面脚本执行完毕之后像目标窗口派发一个 MessageEvent 消息,该MessageEvent消息有四个属性需要注意:

type:表示该message的类型

data:为postMessage的第一个参数

origin:表示调用postMessage方法窗口的源

source:记录调用postMessage方法的窗口对象

特别注意:
1.一定要等A页面嵌入的B页面加载完成之后,再进行postMessage跨域通信
2.一定要对origin做判断,去掉不是来自我们目标窗口的origin,防止来自其他origin的攻击

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
灵活运用CSS3特性绘制简易版围棋效果
Sep 28 HTML / CSS
CSS3中使用RGBA设置透明度的示例
Aug 04 HTML / CSS
详解CSS3的perspective属性设置3D变换距离的方法
May 23 HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
Nov 05 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
Jul 05 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
Dec 13 HTML / CSS
Html5实现iPhone开机界面示例代码
Jun 30 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
Feb 19 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
Dec 20 HTML / CSS
HTML5的postMessage的使用手册
Dec 19 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
Jun 20 HTML / CSS
HTML5 3D书本翻页动画的实现示例
Aug 28 HTML / CSS
Html5跳转到APP指定页面的实现
Jan 14 #HTML / CSS
html5自动播放mov格式视频的实例代码
Jan 14 #HTML / CSS
html5响应式开发自动计算fontSize的方法
Jan 13 #HTML / CSS
html5 制作地图当前定位箭头的方法示例
Jan 10 #HTML / CSS
详解HTML5 Canvas标签及基本使用
Jan 10 #HTML / CSS
HTML5自定义mp3播放器源码
Jan 06 #HTML / CSS
html5 canvas手势解锁源码分享
Jan 07 #HTML / CSS
You might like
PHP表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
php获取域名的google收录示例
2014/03/24 PHP
编译PHP报错configure error Cannot find libmysqlclient under usr的解决方法
2014/06/27 PHP
PHP基于面向对象实现的留言本功能实例
2018/04/04 PHP
PHP7 windows支持
2021/03/09 PHP
jquery蒙版控件实现代码
2010/12/08 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
非主流的textarea自增长实现js代码
2011/12/20 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
2013/10/15 Javascript
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
JS转换HTML转义符的方法
2016/08/24 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
nodejs二进制与Buffer的介绍与使用
2019/07/11 NodeJs
js图数据结构处理 迪杰斯特拉算法代码实例
2019/09/11 Javascript
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python多线程学习资料
2012/12/19 Python
Python实现读取目录所有文件的文件名并保存到txt文件代码
2014/11/22 Python
python判断给定的字符串是否是有效日期的方法
2015/05/13 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
不到40行代码用Python实现一个简单的推荐系统
2019/05/10 Python
Python简单处理坐标排序问题示例
2019/07/11 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
Silk Therapeutics官网:清洁、抗衰老护肤品
2020/08/12 全球购物
如何保障Web服务器安全
2014/05/05 面试题
信用社主任竞聘演讲稿
2014/05/23 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
校园环境卫生倡议书
2015/04/29 职场文书
商业计划书之服装
2019/09/09 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers