详解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 相关文章推荐
CSS中一些@规则的用法小结
Mar 09 HTML / CSS
CSS3弹性布局内容对齐(justify-content)属性使用详解
Jul 31 HTML / CSS
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
Dec 19 HTML / CSS
简单掌握CSS3中resize属性的用法
Apr 01 HTML / CSS
详解CSS3的perspective属性设置3D变换距离的方法
May 23 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
Sep 20 HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
Mar 14 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
Aug 23 HTML / CSS
吃透移动端 1px的具体用法
Dec 16 HTML / CSS
在html页面中取得session中的值的方法
Aug 11 HTML / CSS
几款流行的HTML5 UI框架比较(小结)
Apr 08 HTML / CSS
HTML5 新增内容和 API详解
Nov 17 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
PHP 文件类型判断代码
2009/03/13 PHP
PHP编译安装中遇到的两个错误和解决方法
2014/08/20 PHP
AJAX的使用方法详解
2017/04/29 PHP
js资料toString 方法
2007/03/13 Javascript
jquery 将disabled的元素置为enabled的三种方法
2009/07/25 Javascript
Javascript this指针
2009/07/30 Javascript
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
jquery实现鼠标拖动图片效果示例代码
2014/01/09 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
2016/07/19 Javascript
JavaScript中的工厂函数(推荐)
2017/03/08 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
2017/04/11 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
JS简单表单验证功能完整示例
2020/01/26 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
小程序实现点击tab切换左右滑动
2020/11/16 Javascript
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python中去空格函数的用法
2014/08/21 Python
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
windows10环境下用anaconda和VScode配置的图文教程
2020/03/30 Python
如何实现在jupyter notebook中播放视频(不停地展示图片)
2020/04/23 Python
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
英国领先的游戏零售商:GAME
2019/09/24 全球购物
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
学校安全工作制度
2014/01/19 职场文书
地理教师岗位职责
2014/03/16 职场文书
公司口号大全
2014/06/11 职场文书
2016年小学生寒假总结
2015/10/10 职场文书
致毕业季:你如何做好自己的职业生涯规划书?
2019/07/01 职场文书
2020年元旦晚会策划书模板
2019/12/30 职场文书