使用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新属性transition-property transform box-shadow实例学习
Jun 06 HTML / CSS
CSS书写规范、顺序和命名规则
Mar 06 HTML / CSS
利用css3-animation实现逐帧动画效果
Mar 10 HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
Apr 21 HTML / CSS
CSS3 实现雷达扫描图的示例代码
Sep 21 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
Apr 19 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
Mar 21 HTML / CSS
使用HTML5 Canvas API控制字体的显示与渲染的方法
Mar 24 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 HTML / CSS
萌新HTML5 入门指南(二)
Nov 09 HTML / CSS
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
Oct 16 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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
php 常用字符串函数总结
2008/03/15 PHP
PHP生成HTML静态页面实例代码
2008/08/31 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
Linux系统下使用XHProf和XHGui分析PHP运行性能
2015/12/08 PHP
thinkPHP实现多字段模糊匹配查询的方法
2016/12/01 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
jQuery :nth-child前有无空格的区别分析
2011/07/11 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
AngularJS 2.0入门权威指南
2016/10/08 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
ReactNative实现图片上传功能的示例代码
2017/07/11 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
使用python分析git log日志示例
2014/02/27 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
Django网络框架之HelloDjango项目创建教程
2019/06/06 Python
python生成特定分布数的实例
2019/12/05 Python
美国牙科折扣计划:DentalPlans.com
2019/08/26 全球购物
经理秘书找工作求职信
2013/12/19 职场文书
海南地接欢迎词
2014/01/14 职场文书
工会主席岗位责任制
2014/02/11 职场文书
节电标语大全
2014/06/23 职场文书
辞职信怎么写
2015/02/27 职场文书
小人国观后感
2015/06/11 职场文书
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA