效果图

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. Matlab入门基础

    matlab入门篇,一些基础用法记一下~ M语言是解释型语言 ​ who:查看当前变量 ​ whoes:查看当前变量及其维数.所占字节数等. ​ clear: 清除所有变量 ​ clear + 变量名 ...

  2. ElasticSearch 基础 1

    ElasticSearch 基础=============================== 索引创建 ========================== 1. RESTFUL APIAPI 基本 ...

  3. 在VS Code中使用Jupyter Notebook

    一.安装配置 1.在扩展商店中安装官方的Python扩展包 2.系统已经安装了Jupyter Notebook 由于系统上的Python环境是用Anaconda安装的,已经有Jupyter Noteb ...

  4. BZOJ 4987 (树形DP)

    ###题面 https://www.lydsy.com/JudgeOnline/problem.php?id=4987 ###分析 先考虑贪心,显然k个节点形成一棵树 求出树的直径,显然直径应该只被经 ...

  5. POJ 1905 题解(二分+几何)

    题面 传送门 分析 如图:已知AB=L,弧AB=L(1+nC)" role="presentation" style="position: relative;& ...

  6. 一键生成APK

    傻瓜式的生成APK网址:https://www.appbsl.com/ 第一步 第二步 第三步 第四步

  7. 2019 Multi-University Training Contest 2 - 1009 - 回文自动机

    http://acm.hdu.edu.cn/showproblem.php?pid=6599 有好几种实现方式,首先都是用回文自动机统计好回文串的个数. 记得把每个节点的cnt加到他的fail上,因为 ...

  8. 问题 E: Jack的A+B

    问题 E: Jack的A+B 时间限制: 1 Sec  内存限制: 128 MB提交: 1996  解决: 601[提交] [状态] [命题人:jsu_admin] 题目描述 现在有整数a,b,请按西 ...

  9. 关于.net的精彩对话（转）

    [序言]我想很多爱好软件编程的网友都像我一样,对微软推出的.net平台充满了好奇,但是看了相关的文档也是一头雾水,还好,Purple很幸运在QQ上遇到了一位.net高手,经过高手的一番教导,Purpl ...

  10. 【推荐系统】知乎live入门

    参考链接: 知乎推荐系统live:姚凯飞推荐系统live 目录 1.推荐概览与框架 2.细节补充 3.召回 4.排序 5.常用技能与日常工作 5.用户画像-特征工程 6.相关经验 7.推荐考试拿分路径 ...