详解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中background-clip和background-origin的区别示例介绍
Mar 10 HTML / CSS
css3 伪元素和伪类选择器详解
Sep 04 HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
Dec 06 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
解决H5的a标签的download属性下载service上的文件出现跨域问题
Jul 16 HTML / CSS
HTML5中实现拖放效果无须借助javascript
Dec 26 HTML / CSS
实例讲解HTML5的meta标签的一些应用
Dec 08 HTML / CSS
HTML5未来发展趋势
Feb 01 HTML / CSS
HTML5拖放API实现自动生成相框功能
Apr 07 HTML / CSS
Css预编语言及区别详解
Apr 25 HTML / CSS
CSS基础详解
Oct 16 HTML / CSS
聊聊CSS粘性定位sticky案例解析
Jun 01 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
将OICQ数据转成MYSQL数据
2006/10/09 PHP
php验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
PHP中定义数组常量(array常量)的方法
2014/11/17 PHP
php通过session防url攻击方法
2014/12/10 PHP
PHP文件缓存类示例分享
2015/01/30 PHP
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
2013/01/11 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
2016/02/02 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
详解ES6之async+await 同步/异步方案
2017/09/19 Javascript
初识 Vue.js 中的 *.Vue文件
2017/11/22 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
Vue记住滚动条和实现下拉加载的完美方法
2020/07/31 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频
2018/12/05 DOTA
Django渲染Markdown文章目录的方法示例
2019/01/02 Python
如何使用Python自动控制windows桌面
2019/07/11 Python
Python 控制终端输出文字的实例
2019/07/12 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
个人四风问题原因分析及整改措施
2014/09/28 职场文书
班主任自我评价范文
2015/03/11 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书
详解NodeJS模块化
2021/06/15 NodeJs
Python List remove()实例用法详解
2021/08/02 Python
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL