<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Bootstrap 模板</title>
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <!-- 引入 Bootstrap -->
	    <link href="http://www.layoutit.cn/css/all.css" rel="stylesheet">
	    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
	    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
	    <!--[if lt IE 9]>
	       <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	       <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	    <![endif]-->
</head>
<body>
	<script>
		function text(){
			var id = document.getElementById("frame");
			var win = id.contentWindow;
			var mess = '{"name":"zhujiasheng","sex":1,"age":32}';
			win.postMessage(mess,"*")
		}
	</script>
	<div onclick="text()">b页面发送消息</div>
	<iframe src="b.html" id="frame" ></iframe>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>b页面</title>
	<style>
		*{margin:0;padding:0;}
		.dom{width:200px;height:200px;border:1px solid #ccc;margin:0 auto;}
	</style>
</head>
<body>
	<div class="dom">
	</div>
	<script>
		window.onmessage = function(e){
		   e = e || event;
		   var data = JSON.parse(e.data);
		   console.log(data);
		   var dom = document.getElementsByClassName("dom")[0];
		   var str = "";
		   for(var i in data){
		   	  str +="<span style='color:#f00;'>"+data[i]+"</sapn><br/>";
		   }
		   dom.innerHTML = str;
		}
	</script>
</body>
</html>

跨域使用onmessage实现方式的更多相关文章

  1. ajax处理跨域有几种方式

    一.什么是跨域 同源策略是由Netscape提出的著名安全策略,是浏览器最核心.基本的安全功能,它限制了一个源(origin)中加载文本或者脚本与来自其他源(origin)中资源的交互方式,所谓的同源 ...

  2. JQuery的Ajax跨域请求的解决方式

            今天在项目中须要做远程数据载入并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究 ...

  3. php跨域的几种方式

    PHP实现跨域的几种形式 1.JSONP(JSON with padding)原理 利用html里面script标签可以加载其他域下的js这一特性,使用script src的形式来获取其他域下的数据, ...

  4. ajax 跨域的几种方式

    网络上跨域的文章大多一样,这里我写下,巩固下自己的知识,顺便做个记录 什么是跨域 这里简单拿百度的网址做个例子:http://www.baidu.com:80 (默认都是80端口.可省略) http ...

  5. 使用Cors在WebApi中实现跨域请求，请求方式为angular的 $http.jsonp

    使用Cors在WebApi中实现跨域请求 第一步,在webapi项目中安装cors 在Web API配置文件中(Global.asax)进行全局配置: public class WebApiAppli ...

  6. 深入浅出：了解jsonp跨域的九种方式

    什么是“”跨域”: 跨域访问,简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容.由于安全原因,跨域访问是被各大浏览器所默认禁止的.当一个域与其他域建立了信 ...

  7. Springboot设置跨域的三种方式

    方式一(精细配置) 在需要跨域的整个Controller或者单个方法上添加@CrossOrigin注解 方式二(全局配置) @Configuration public class WebMvcConf ...

  8. SpringBoot设置跨域的几种方式

    什么是跨域? 浏览器从一个域名的网页去请求另一个域名的资源时,域名.端口.协议任一不同,都是跨域 原因: 由于浏览器的同源策略, 即a网站只能访问a网站的内容,不能访问b网站的内容. 注意: 跨域问题 ...

  9. SpringBoot 中实现跨域的几种方式

    一.为什么会出现跨域问题 出于浏览器的同源策略限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响. ...

随机推荐

  1. js实现观察者模式风格替换

    如下图,我们看到两种风格:在选择男士时,页面颜色为黑色:在选择女士时,页面颜色为粉红色. 主要可以分为两类: 下拉框 ---> 被观察者 div ---> 观察者 面向过程实现风格替换: ...

  2. NodeJS学习笔记 进阶 (4)基于express+muter的文件上传(ok)

    个人总结:这篇文章主要讲了multer插件的使用,类似于formidable,可以用来处理post表单中的文件上传,读完这篇文章需要10分钟. 摘选自网络 概览 图片上传是web开发中经常用到的功能, ...

  3. Redis-Sentinel原理及配置详解【转】

    https://www.cnblogs.com/zhoujinyi/p/5570024.html

  4. 【cdoj 1544】当咸鱼也要按照基本法

    [题目链接]:http://acm.uestc.edu.cn/#/problem/show/1544 [题意] [题解] 容斥原理题; 1..(2^m)-1枚举 设k为其二进制形式中1的个数; k为奇 ...

  5. 【图像配准】基于互信息的图像配准算法：MI、EMI、ECC算法

    简单介绍: 基于互信息的图像配准算法以其较高的配准精度和广泛的适用性而成为图像配准领域研究的热点之中的一个.而基于互信息的医学图像配准方法被觉得是最好的配准方法之中的一个.基于此.本文将介绍简单的基于 ...

  6. 解决Android Studio 2.2.3中添加.cpp .h文件在Project->Android无法显示，无法正常编译问题。

    搭配使用 Android Studio 2.2 或更高版本与 Android Plugin for Gradle 版本 2.2.0 或更高版本时,您可以将 C 和 C++ 代码编译到 Gradle 与 ...

  7. php中对象转数组有哪些方法（总结测试）

    php中对象转数组有哪些方法(总结测试) 一.总结 一句话总结:json_decode(json_encode($array),true)和array强制转换(或带递归) 1.array方式强制转换对 ...

  8. Linux系统的LOG日志文件及入侵后日志的清除

    UNIX网管员主要是靠系统的LOG,来获得入侵的痕迹.当然也有第三方工具记录入侵系统的 痕迹,UNIX系统存放LOG文件,普通位置如下: /usr/adm - 早期版本的UNIX/var/adm -  ...

  9. 78.Nodejs基础中间件Connect

    转自:https://www.cnblogs.com/chris-oil/p/5625437.html 前言 “中间件”在软件领域是一个非常广的概念,除操作系统的软件都可以称为中间件,比如,消息中间件 ...

  10. flowable一个简单的例子

    holiday-request.bpmn20.xml: <?xml version="1.0" encoding="UTF-8"?> <def ...