效果图

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处理字幕文件

    始 下了部老电影,找到了相关的中英文字幕,奇怪的是,英文字幕能正常现实,中文字幕却不可以,我一度以为是Linux下播放器编码的问题,但是怎么更改设置都无效,而我以前在看其他电影时,中文字幕是正常的.所 ...

  2. STL关联容器值hashtable

    hashtable(散列表)是一种数据结构,在元素的插入,删除,搜索操作上具有常数平均时间复杂度O(1); hashtable名词 散列函数:负责将某一元素映射为索引. 碰撞(collision):不 ...

  3. [Web 前端] 008 css 颜色表示方法

    css 颜色表示法 颜色名表示 如 red 红色 green 绿色 blue 蓝色 16 进制数值表示 常见颜色 正常表示 缩写表示 红色 #ff0000 #f00 绿色 #00ff0 #0f0 蓝色 ...

  4. [19/05/15-星期三] HTML_body标签(超链接标签和锚点)

    一.超链接标签 <html> <head> <meta charset="UTF-8"> <title>04 body超链接标签学习 ...

  5. 全球编程语言薪资排行榜，Java竟然垫底！！！

    近日,Stack Overflow 发布了 2019 年度开发者调查报告,这次调查有来自全球的几乎将近 90000 名开发者参与,是对世界各地开发人员进行的规模最大,最全面的调查. 这次调查报告中总结 ...

  6. JavaScript之BOM操作

    一, 什么是BOM BOM:Browser Object Model,浏览器对象模型 BOM的结构图: 从上图也可以看出: window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也 ...

  7. SCUT - 271 - CC 非诚勿扰 - FFT

    https://scut.online/p/271 第一次遇到没这么裸的,其实感觉到是卷积但是不知道怎么化.看来以后要多注意下标. #include <bits/stdc++.h> usi ...

  8. 2019 Multi-University Training Contest 3 - 1006 - Fansblog - 打表 - 暴力

    http://acm.hdu.edu.cn/showproblem.php?pid=6608 题意:给一个比较大的质数P(1e14以内),求比它小的最大的质数Q(貌似保证存在的样子,反正我没判不存在) ...

  9. 关于html5 video的连续播放

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  10. Oracle 常用统计视图汇总

         Oracle统计信息对数据库性能优化和故障排除都相当重要,目前接触到的与统计信息相关的视图大体有 4 个:   1.v$sysstat 视图      该视图用于记录系统级的统计信息,共 5 ...