效果图

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. windows 10上玩耍ubuntu

    win10 已经支持运行子系统ubuntu了. 安装ubuntu 程序和功能>>启用或关闭Windows功能>>勾选"适用于Linux的Windows子系统" ...

  2. JavaScript文件中; !function (win, undefined) {}(window);的意义

    +function (){}-function (){}!function (){}~function (){}(function (){})() 这种写法可以保证匿名函数立即运行且运行一次 传入的 ...

  3. Redis进阶:Redis的持久化机制

    Redis进阶:Redis的持久化机制 Redis的持久化机制目前包括RBD和AOF两种方式. RDB持久化 RDB持久化方式是在指定的时间间隔对数据进行快照存储.过期的键值不会被存储到快照中.如果恢 ...

  4. Spring MVC-学习笔记（2）DispatcherServlet、@Controller、@RequestMapping、处理方法参数类型、可返回类型、Model、ModelMap、ModelAndView

    1.前端控制器org.springframework.web.servlet.DispatcherServlet 所有的请求驱动都围绕这个DispatcherServlet来分派请求.springMV ...

  5. FZUOJ-2275 Game

     Problem 2275 Game Accept: 159    Submit: 539 Time Limit: 1000 mSec    Memory Limit : 262144 KB  Pro ...

  6. SCUT - 297 - 狂符「幻视调律(Visionary Tuning)」 - 重链剖分

    https://scut.online/p/297 一般的树剖是关于点权的,但是突发奇想好像边权也是一样的.做一些小改动. #include<bits/stdc++.h> #define ...

  7. CSS3进度条动画

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. SpringBoot中设置自定义拦截器

    SpringBoot中设置自动以拦截器需要写一个类继承HandlerInterceptorAdapter并重写preHandle方法 例子 public class AuthorityIntercep ...

  9. 前端开发HTML&css入门——常用的标签以及一个小练习

    meta标签 <!doctype html> <html> <head> <meta charset="utf-8" /> < ...

  10. 通过离线安装包解决了 from cryptography.hazmat.bindings._openssl import ffi, lib ImportError: /usr/local/python36/lib/python3.6/site-packages/cryptography-2.2.2-py3.6-linux-x86_64.egg/cryptography/hazmat/binding

    场景:内网服务器不能上外网(代理也不通!), 之前安装了PYTHON的几个安装包,但不是知道为什么无法使用PARAMIKO这个模块 在导入 from cryptography.hazmat.bindi ...