效果图

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>

html5: postMessage解决跨域通信的问题的更多相关文章

  1. [转]html5: postMessage解决跨域和跨页面通信的问题

    [转]html5: postMessage解决跨域和跨页面通信的问题 平时做web开发的时候关于消息传递,除了客户端与服务器传值,还有几个经常会遇到的问题: 多窗口之间消息传递(newWin = wi ...

  2. html5 postMessage解决跨域、跨窗口消息传递

    一些麻烦事儿 平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题 1.页面和其打开的新窗口的数据传递 2.多窗口之间消息传递 3.页面与嵌套的iframe消息传递 4. ...

  3. html5 postMessage解决跨域、跨窗口消息传递[转载]

    原文:http://www.cnblogs.com/dolphinX/p/3464056.html 一些麻烦事儿 平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题 1 ...

  4. html5 postMessage解决跨域、跨窗口消息传递（转）

    仅做学习使用,原文链接:http://www.cnblogs.com/dolphinX/p/3464056.html 一些麻烦事儿 平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经 ...

  5. 利用HTML5的window.postMessage实现跨域通信

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp77   HTML5的window.postMessage简述 postM ...

  6. html5中的postMessage解决跨域问题

    解决跨域问题的方法有很多,如:图像ping(简单).jsonp(缺点是不能实现跨域post).CROS(CORS的本质让服务器通过新增响应头Access-Control-Allow-Origin,通过 ...

  7. JavaScript 跨域：window.postMessage 实现跨域通信

    JavaScript 跨域方式实现方式有很多,之前,一篇文章中提到了 JSONP 形式实现跨域.本文将介绍 HTML5 新增的 api 实现跨域:window.postMessage . 1 othe ...

  8. 使用window.postMessage实现跨域通信

    JavaScript由于同源策略的限制,跨域通信一直是棘手的问题.当然解决方案也有很多: document.domain+iframe的设置,应用于主域相同而子域不同: 利用iframe和locati ...

  9. Html5 postMessage实现跨域消息传递

    一.同源策略 要理解跨域,我们首先要知道什么是同源策略.百度百科上这样定义同源策略:同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略, ...

随机推荐

  1. python中的包和文件夹的区别

    python的模块,就不得不说包(package),package是module的集合,在一个package中有很多的module, 还是以之前的index.py与baiduHq.py模块为案例,说明 ...

  2. java webservice - cxf使用总结 一

    1.创建maven项目 加入pom依赖 <dependency> <groupId>org.apache.cxf</groupId> <artifactId& ...

  3. [19/05/17-星期五] HTML_body标签(内嵌标签)和框架标签

    一.内嵌标签 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!- ...

  4. <每日一题> Day5：简单递推两题

    原题链接 参考代码: #include <iostream> using namespace std; typedef long long ll; + ; ll dp[maxn]; int ...

  5. 第二次java面试（用友山东济南分公司）

    坐标:山东潍坊公共实训基地 面试单位:用友济南分公司(来了一位HR和技术经理) 本人状态:距离离校15天 宣讲: 1.女HR和男技术经理来到我们专业提前准备好的教室,先宣传海报和发传单,然后看了4个3 ...

  6. java _static 关键字

    • 在类中,用static声明的成员变量为静态成员变量 ,或者叫做: 类属性,类变量. • 它为该类的公用变量,属于类,被该类的所有实例共享,在类被载入时被显式初始化, • 对于该类的所有对象来说,s ...

  7. Python之文件和异常IO

    文件和异常 读写文本文件 读取文本文件时,需要在使用open函数时指定好带路径的文件名(可以使用相对路径或绝对路径)并将文件模式设置为'r'(如果不指定,默认值也是'r'),然后通过encoding参 ...

  8. 搜索（BFS）---最短单词路径

    最短单词路径 127. Word Ladder (Medium) Input: beginWord = "hit", endWord = "cog", word ...

  9. Nhbernate

    一.ORM1.对象关系映射(Object Relational Mapping,简称ORM)是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术.2.ORM是通过使用描述对象和数据库之间映射的 ...

  10. WannaCry的UWP版，哈哈哈