详解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的鼠标经过动画显示详情特效的实例教程
Dec 29 HTML / CSS
CSS3实现闪烁动画效果的方法
Feb 09 HTML / CSS
HTML5之SVG 2D入门7—SVG元素的重用与引用
Jan 30 HTML / CSS
html5实现多文件的上传示例代码
Feb 13 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
May 12 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
Jan 27 HTML / CSS
推荐10个HTML5响应式框架
Feb 25 HTML / CSS
谈一谈HTML5本地存储技术
Mar 02 HTML / CSS
HTML5之tabindex属性全面解析
Jul 07 HTML / CSS
HTML5 manifest离线缓存的示例代码
Aug 08 HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
Jan 18 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数据库密码的找回的步骤
2011/01/12 PHP
PHP学习笔记(一) 简单了解PHP
2014/08/04 PHP
php字符串函数学习之substr()
2015/03/27 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
刷新时清空文本框内容的js代码
2007/04/23 Javascript
使用jQuery轻松实现Ajax的实例代码
2010/08/16 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
2010/12/02 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
基于jQuery实现文字打印动态效果
2017/04/21 jQuery
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
详解JSONObject和JSONArray区别及基本用法
2017/10/25 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
原生JS生成指定位数的验证码
2020/10/28 Javascript
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
Python进程间通信Queue实例解析
2018/01/25 Python
Python cookbook(数据结构与算法)从任意长度的可迭代对象中分解元素操作示例
2018/02/13 Python
Python模拟登录的多种方法(四种)
2018/06/01 Python
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
在pycharm中为项目导入anacodna环境的操作方法
2020/02/12 Python
python爬虫智能翻页批量下载文件的实例详解
2021/02/02 Python
NUK奶瓶美国官网:NUK美国
2016/09/26 全球购物
美国半成品食材配送服务商:Home Chef
2018/01/25 全球购物
党员批评与自我批评范文
2014/09/23 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
小学音乐课教学反思
2016/02/18 职场文书
一文搞懂python异常处理、模块与包
2021/06/26 Python
浅析MySQL如何实现事务隔离
2021/06/26 MySQL