使用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哪些新特性值得称赞
Mar 02 HTML / CSS
利用css3-animation实现逐帧动画效果
Mar 10 HTML / CSS
CSS3中Animation动画属性用法详解
Jul 04 HTML / CSS
html5 offlline 缓存使用示例
Jun 24 HTML / CSS
LocalStorage记住用户和密码功能
Jul 24 HTML / CSS
浅谈html5之sse服务器发送事件EventSource介绍
Aug 28 HTML / CSS
详解基于canvas的视频遮罩插件
Jan 04 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
Apr 23 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
Jun 15 HTML / CSS
HTML5实现移动端点击翻牌功能
Oct 23 HTML / CSS
浅谈由position属性引申的css进阶讨论
May 25 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
JS 网站性能优化笔记
2011/05/24 PHP
php实现图片局部打马赛克的方法
2015/02/11 PHP
PHP实现的迷你漂流瓶
2015/07/29 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
javaScript 简单验证代码(用户名,密码,邮箱)
2009/09/28 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
解析jQuery与其它js(Prototype)库兼容共存
2013/07/04 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
浅谈JavaScript 框架分类
2014/11/10 Javascript
js实现仿qq消息的弹出窗效果
2016/01/06 Javascript
javascript实现右下角广告框效果
2017/02/01 Javascript
详谈js中window.location.search的用法和作用
2017/02/13 Javascript
微信小程序 地图map实例详解
2017/06/07 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
[09:40]DAC2018 4.5 SOLO赛 MidOne vs Miracle
2018/04/06 DOTA
Python操作Word批量生成文章的方法
2015/07/28 Python
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
Python 调用PIL库失败的解决方法
2019/01/08 Python
解决python 3 urllib 没有 urlencode 属性的问题
2019/08/22 Python
复化梯形求积分实例——用Python进行数值计算
2019/11/20 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
使用pandas库对csv文件进行筛选保存
2020/05/25 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
html5 自定义播放器核心代码
2013/12/20 HTML / CSS
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
决心书标准格式
2014/03/11 职场文书
晨会主持词
2014/03/17 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
2016年教师师德师风心得体会
2016/01/12 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书