(二)文档请求不同源之window.postMessage跨域

一、基本原理

HTML5为了解决跨域，引入了跨文档通信API（Cross-document messaging）。这个API为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。Internet Explorer 8+, chrome，Firefox , Opera和Safari 都支持这个功能。

二、测试步骤

1、创建a.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>window.postMessage解决跨域a.html</title>
</head>
<body>
<script>window.onload = function() {var subwin = window.open('http://localhost:8081/b.html', 'title');//父窗口http://localhost:8080/a.html向子窗口http://localhost:8081/b.html发消息，调用postMessage方法。
        subwin.postMessage('我要给你发消息了!', 'http://localhost:8081');}window.addEventListener('message', function(e) {console.log('a.html接收到的消息:', e.data);});
</script>
</body>
</html>

发送消息，监听消息。

2、创建b.html

<script>var messageFunc = function (event) {  if(event.source != window.parent) {return;}var data = event.data,//消息
      origin = event.origin,//消息来源地址
      source = event.source;//源Window对象  if(origin == "http://localhost:8080"){  console.log('b.html接收到的消息:', data);}  source.postMessage('我已经接收到消息了!', origin);};  if (typeof window.addEventListener != 'undefined') {  window.addEventListener('message', messageFunc, false);  } else if (typeof window.attachEvent != 'undefined') {  window.attachEvent('message', messageFunc);  }
</script>

3、打开两个http服务器

4、打开浏览器就可以看到结果：http://localhost:8080/a.html

转载于:https://www.cnblogs.com/camille666/p/cross_domain_window_postmessage.html

(二)文档请求不同源之window.postMessage跨域相关推荐

(二)文档请求不同源之window.name跨域
一.基本原理 window.name不是一个普通的全局变量,而是当前窗口的名字.这里要注意的是每个iframe都有包裹它的window,而这个window 是top window的子窗口,而它自然也有 ...
GA/T1400文档请求失败消息返回提
GA/T1400 文档请求失败消息返回指的是当你在请求 GA/T1400 标准文档时,服务器返回的消息告诉你请求失败.这可能是由于请求的文档不存在或者因为服务器遇到了问题而无法响应请求.你应该检查你的 ...
浏览器同源策略，及跨域解决方案
原文链接:浏览器同源策略,及跨域解决方案一.Origin(源) 源由下面三个部分组成: 域名端口协议两个 URL ,只有这三个都相同的情况下,才可以称为同源. 下来就以 "www.e ...
CORS 请求未能成功_当遇到跨域开发时, 我们如何处理好前后端配置和请求库封装(koa/axios版)...
我们知道很多大型项目都或多或少的采用跨域的模式开发, 以达到服务和资源的解耦和高效利用. 在大前端盛行的今天更为如此, 前端工程师可以通过nodejs或者Nginx轻松搭建起web服务器.这个时候我们 ...
ajax+php跨域请求数据库,基于jQuery的ajax跨域请求，PHP作为服务器端代码
ajax实现跨域请求有两种方式: 方法一:jsonp的方式 jsonp方式的关键点在客户请求以jsonp作为数据类型,服务器端接收jsonp的回调函数,并通过回调函数进行数据的传输.具体代码如下: 客 ...
Vuejs模拟Ajax请求接口（天气预报API）跨域问题 - 案例篇
vuejs的Ajax跨域请求问题一直都是前端人员开发vue项目进程中经常遇到的不得不解决的热门问题,也是个心病. 首先看一下,页面报错内容提示: Access to XMLHttpRequest a ...
爬取斗图网图片,使用xpath格式来匹配内容,对请求伪装成浏览器, Referer 防跨域请求...
6.21自我总结一.爬取斗图网 1.摘要使用xpath匹配规则查找对应信息文件将请求伪装成浏览器Referer 防跨域请求 2.爬取代码 #导入模块 import requests#爬取网址 ur ...
Ajax→异步的JavaScript和XML、HTTP请求响应、Ajax简介同步异步、XMLHttpRequest类的方法及属性、原生Ajax、Koa实现Ajax、接口文档、浏览器同源策略、反向代理
浏览器服务器 HTTP请求响应数据库后端语言 Ajax简介同步异步 Koa前端框架 XMLHttpRequest类的方法及属性原生Ajax Koa实现Ajax JSON DOM 接口文档浏览器同 ...
springboot 接口文档请求 enum_Spring Boot集成SpringFox 3：生成Swagger接口文档
SpringFox介绍 SpringFox是一个开源的API Doc的框架, 它的前身是swagger-springmvc,可以将我们的Controller中的方法以文档的形式展现.官方定义为:Aut ...
OpenCV实践小项目(二) -文档ocr扫描识别
1. 写在前面今天整理OpenCV入门的第二个实战小项目, 前一篇文章是信用卡数字识别, 主要运用了OpenCV基础图像处理操作里面的轮廓检测, 边缘检测,形态学操作, 今天的这个项目叫做文档ocr ...

(二)文档请求不同源之window.postMessage跨域

(二)文档请求不同源之window.postMessage跨域相关推荐

最新文章

热门文章