详解html5 postMessage解决跨域通信的问题


Posted in HTML / CSS onAugust 17, 2018

本文介绍了详解html5 postMessage解决跨域通信的问题,分享给大家,具体如下:

效果图

详解html5 postMessage解决跨域通信的问题

postmessage解析HTML5提供了新型机制PostMessage实现安全的跨源通信. 语法 otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow: 其他窗口的一个引用, 比如IFRAME的contentWindow属性, 执行,window.open返回的窗口对象. message: 将要发送到其他窗口的数据. targetOrigin:通过窗口的origin属性来指定哪些窗口能接收到消息事件, 其值可以是字符”*”(表示无限制)或者一个URL transfer:是一串和message同时传递的Transferable对象. 这些对象的所有权将被转移给消息的接收方, 而发送一放将不再保有所有权.element.addEventListener(event,fn,useCaption ); 三个参数 event 事件 比如click mouseenter mouseleave 回调函数 useCaption用于描述是冒泡还是捕获。默认值是false,即冒泡传递。 当值为true,就是捕获传递。实现方式

主界面 main.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>跨域数据访问</title>
  <script type="text/javascript">
         window.addEventListener('message',function(e){
           console.log("e--->",e);
           const data = e.data;
           document.getElementById('main1').style.backgroundColor=e.data;
         },false)

  </script>
</head>
<body>
  <div id="main1" style="width:200px;height:200px;margin:100px;border:solid 1px #000;">
     我是主界面,等待接收iframe的传递
  </div>
  <div style="margin:100px;">
     iframe
     <iframe src="http://localhost:3000/iframe.html" width="800px" height="300px" ></iframe>
  </div>
</body>
</html>

iframe界面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
    <style type="text/css">
           html,body{
               height:100%;
               margin:0px;
           }
    </style>
</head>
  <body style="height:100%;">
        <div id="frame" style="height:200px; width:200px;background-color:rgb(204, 204, 0)" onclick="changeColor()">
           点击改变颜色
        </div>
        <script type="text/javascript">
             function changeColor(){
               var frame = document.getElementById('frame');
               var color=frame.style.backgroundColor;
               if(color=='rgb(204, 102, 0)'){
                   color='rgb(204, 204, 0)';
               }else{
                   color='rgb(204,102,0)';
               }
                console.log("frame===>",frame);
                console.log("color",color);
               frame.style.backgroundColor=color;
               window.parent.postMessage(color,'*');
             }
        </script>
  </body>
</html>

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

HTML / CSS 相关文章推荐
CSS3制作皮卡丘动画壁纸的示例
Nov 02 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 HTML / CSS
突袭HTML5之Javascript API扩展3—本地存储全新体验
Jan 31 HTML / CSS
html5教程画矩形代码分享
Dec 04 HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
Jun 16 HTML / CSS
AmazeUI 缩略图的实现示例
Aug 18 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
Nov 10 HTML / CSS
Html5新增了哪些功能
Apr 16 HTML / CSS
html2 canvas svg不能识别的解决方案
Jun 03 HTML / CSS
基于HTML十秒做出淘宝页面
Oct 24 HTML / CSS
Unicode中的CJK(中日韩统一表意文字)字符小结
Dec 06 HTML / CSS
CSS SandBox应用场景及常见问题
Jun 25 HTML / CSS
HTML5 manifest离线缓存的示例代码
Aug 08 #HTML / CSS
移动端Html5页面生成图片解决方案
Aug 07 #HTML / CSS
详解WebSocket跨域问题解决
Aug 06 #HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 #HTML / CSS
HTML5拖拽功能实现的拼图游戏
Jul 31 #HTML / CSS
Html5页面二次分享的实现
Jul 30 #HTML / CSS
利用Storage Event实现页面间通信的示例代码
Jul 26 #HTML / CSS
You might like
10个可以简化php开发过程的MySQL工具
2010/04/11 PHP
php树型类实例
2014/12/05 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
让你的CSS像Jquery一样做筛选的实现方法
2011/07/10 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
JS实现图片上传预览功能
2016/11/21 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
原JS实现banner图的常用功能
2017/06/12 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
vue组件命名和props命名代码详解
2019/09/01 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
Vue的自定义组件不能使用click方法的解决
2020/07/28 Javascript
详解 javascript对象创建模式
2020/10/30 Javascript
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
Pyramid将models.py文件的内容分布到多个文件的方法
2013/11/27 Python
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
Python中序列的修改、散列与切片详解
2017/08/27 Python
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
python让列表倒序输出的实例
2018/06/25 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
python调用c++ ctype list传数组或者返回数组的方法
2019/02/13 Python
Python 中的 global 标识对变量作用域的影响
2019/08/12 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
韩国江南富人区高端时尚百货商场:Galleria(格乐丽雅)
2018/03/27 全球购物
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
优秀演讲稿范文
2013/12/29 职场文书
领导失职检讨书
2014/02/24 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
redis protocol通信协议及使用详解
2022/07/15 Redis