使用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 相关文章推荐
纯CSS实现的大小渐变、渐远效果
Apr 15 HTML / CSS
css3中transition属性详解
Sep 02 HTML / CSS
css实例教程 一款纯css3实现的超炫动画背画特效
Nov 05 HTML / CSS
使用CSS3制作一个简单的Chrome模拟器
Jul 15 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
Jan 25 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
Jul 11 HTML / CSS
10个最常见的HTML5面试题 附答案
Jun 06 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
Aug 04 HTML / CSS
html5移动端自适应布局的实现
Apr 15 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 HTML / CSS
血轮眼轮回眼特效 html+css
Mar 31 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
如何将数据从文本导入到mysql
2006/10/09 PHP
基于PHP静态类的原罪详解
2013/05/06 PHP
php正则替换处理HTML页面的方法
2015/06/17 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法
2016/05/13 PHP
用javascript实现计算两个日期的间隔天数
2007/08/14 Javascript
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
JQuery之拖拽插件实现代码
2011/04/14 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
2013/04/25 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
[39:08]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第一场 12.12
2020/12/16 DOTA
python中mechanize库的简单使用示例
2014/01/10 Python
Python连接SQLServer2000的方法详解
2017/04/19 Python
python爬虫之百度API调用方法
2017/06/11 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
简单了解Django模板的使用
2017/12/20 Python
django 中QuerySet特性功能详解
2019/07/25 Python
python检测服务器端口代码实例
2019/08/31 Python
python实现飞机大战游戏(pygame版)
2020/10/26 Python
浅析matlab中imadjust函数
2020/02/27 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
Python实现Kerberos用户的增删改查操作
2020/12/14 Python
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
出生公证书
2015/01/23 职场文书
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js
Vue操作Storage本地化存储
2022/04/29 Vue.js