效果图

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数据结构与算法相关问题与解决技巧

    实际案例: 某编程竞赛系统,对参赛选手编程解体进行计时,选手完成题目后,吧该选手解体用时记录到字典中,以便赛后按选手名查询成绩 {'Lilei':(2,43),'HanMei':(5,52),'Jim ...

  2. 【ABAP系列】SAP ABAP WS_DELIVERY_UPDATE 修改数量、过账日期并发货过账

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP WS_DELI ...

  3. python基础数据类型补充以及编码的进阶

    一.基本数据类型的补充循环列表改变列表大小的问题#请把列表中索引为基数的元素写出l1=[1,2,3,4,5,6]for i in l1: if i%2!=0: print(i)结果:135二:基本数据 ...

  4. c#工厂模式

    创建一个抽象类: public abstract class Test {  public abstract void Print();//输出信息} 创建输出123的测试类 public class ...

  5. 版本控制工具 GIT 简要教程

    一,Git 简介 其实这个就不用说了 但是国际惯例还是介绍一下吧; Git 是一个开源的分布式版本控制系统,用于敏捷 高效地处理任何或小或大的项目. Git 是 Linus Torvalds 为了帮助 ...

  6. Windows + Ubuntu 16.04 双系统安装详细教程（转）

    转载自:http://www.cnblogs.com/Duane/p/6776302.html 前言:本篇文章是对之前文章的更新,更新的主内容是把原来用手机拍摄的图片换成了虚拟机的截图,以及对磁盘划分 ...

  7. quartz任务调度的详解

    1.Quartz包含3个核心(调度器.作业类.触发器) (1).作业类:只需要实现org.quartz.job接口,同时包含里面的一个方法体execute()[这是被调度的作业体] (2).调度器:是 ...

  8. X86平台下用汇编写"HelloWorld"

    首先需要安装一个汇编器,我用的是Nasm,这个汇编器在Linux下安装还是很简单的. Nasm下载地址http://www.nasm.us/pub/nasm/releasebuilds/ 在下载之后对 ...

  9. [2019杭电多校第三场][hdu6606]Distribution of books(线段树&&dp)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6606 题意为在n个数中选m(自选)个数,然后把m个数分成k块,使得每块数字之和最大的最小. 求数字和最 ...

  10. centos安装httprunner方法

    测试脚本执行的环境部署(在jenkins服务器中,要求jenkins服务器和目标的灰度环境是连通的): 一.安装python3.8 $python#看见2.6.6Python 2.6.6 (r266: ...