跨域使用onmessage实现方式
<!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实现方式的更多相关文章
- ajax处理跨域有几种方式
一.什么是跨域 同源策略是由Netscape提出的著名安全策略,是浏览器最核心.基本的安全功能,它限制了一个源(origin)中加载文本或者脚本与来自其他源(origin)中资源的交互方式,所谓的同源 ...
- JQuery的Ajax跨域请求的解决方式
今天在项目中须要做远程数据载入并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究 ...
- php跨域的几种方式
PHP实现跨域的几种形式 1.JSONP(JSON with padding)原理 利用html里面script标签可以加载其他域下的js这一特性,使用script src的形式来获取其他域下的数据, ...
- ajax 跨域的几种方式
网络上跨域的文章大多一样,这里我写下,巩固下自己的知识,顺便做个记录 什么是跨域 这里简单拿百度的网址做个例子:http://www.baidu.com:80 (默认都是80端口.可省略) http ...
- 使用Cors在WebApi中实现跨域请求，请求方式为angular的 $http.jsonp
使用Cors在WebApi中实现跨域请求 第一步,在webapi项目中安装cors 在Web API配置文件中(Global.asax)进行全局配置: public class WebApiAppli ...
- 深入浅出：了解jsonp跨域的九种方式
什么是“”跨域”: 跨域访问,简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容.由于安全原因,跨域访问是被各大浏览器所默认禁止的.当一个域与其他域建立了信 ...
- Springboot设置跨域的三种方式
方式一(精细配置) 在需要跨域的整个Controller或者单个方法上添加@CrossOrigin注解 方式二(全局配置) @Configuration public class WebMvcConf ...
- SpringBoot设置跨域的几种方式
什么是跨域? 浏览器从一个域名的网页去请求另一个域名的资源时,域名.端口.协议任一不同,都是跨域 原因: 由于浏览器的同源策略, 即a网站只能访问a网站的内容,不能访问b网站的内容. 注意: 跨域问题 ...
- SpringBoot 中实现跨域的几种方式
一.为什么会出现跨域问题 出于浏览器的同源策略限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响. ...
随机推荐
- PostgreSQL Replication之第八章 与pgbouncer一起工作（5）
8.5 维护 pgbouncer 除了我们在本章已经说明的,pgbouncer有一个很好的能够执行基本管理和监控任务的交互式管理界面. 它是如何工作的呢?pgbouncer提供给您一个虚假的称为pgb ...
- （VC）搭建OpenGL编程环境
1.下载glut工具包 opengl需要用到的库.下载glut: http://pan.baidu.com/s/1i4c8sHf 2.安装glut a)解压上面下载到的glut工具包后会得到5个文件, ...
- 51Nod 最长的循环节（打表预处理）
正整数k的倒数1/k,写为10进制的小数如果为无限循环小数,则存在一个循环节,求<=n的数中,倒数循环节长度最长的那个数,假如存在多个最优的答案,输出所有答案中最大的那个数. 1/6= ...
- 发送消息vs函数调用
消息发送:对象处理消息: 消息发送的selector作为消息的一部分,在对象的运行时底层参与了消息分发,最终完成动态函数调用. objc_msgSend(void /* id self, SEL op ...
- 有用的 Bash 快捷键清单
作者: Sk 译者: LCTT Sun Yongfei 现如今,我在终端上花的时间更多,尝试在命令行完成比在图形界面更多的工作.随着时间推移,我学了许多 BASH 的技巧.这是一份每个 Linux 用 ...
- NodeJS学习笔记 进阶 (7)express+session实现简易身份认证(ok)
个人总结: 这篇文章讲解了express框架中如何使用session,主要用了express-session这个包.更多可以参考npm.js来看,读完这篇文章需要10分钟. 摘选自网络: 文档概览 本 ...
- vscode 调试vue.js程序
npm install -g vue-cli //安装vue-clivue init webpack projectName //创建项目 1.Ctrl+~ 打开命令行 ...
- POJ1201Intervals(差分约束）
题意 给出数轴上的n个区间[ai,bi],每个区间都是连续的int区间. 现在要在数轴上任意取一堆元素,构成一个元素集合V 要求每个区间[ai,bi]和元素集合V的交集至少有ci不同的元素 求集合V最 ...
- CMSIS-RTOS 信号量
信号量Semaphores 和信号类似,信号量也是一种同步多个线程的方式,简单来讲,信号量就是装有一些令牌的容器.当一个线程在执行过程中,就可能遇到一个系统调用来获取信号量令牌,如果这个信号量包含多个 ...
- CSU 1249 竞争性酶抑制剂和同工酶
1249: 竞争性酶抑制剂和同工酶 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 109 Solved: 49 Description 人体内很多化学 ...