Postmessage

问题：PostMessage父子页面如何通信？ 解决办法：子页面 ：window.postMessage(objData, window.location.href)//要传递的数据 接管信息的地址父页面：window.addEventListener('message', receiveMessage, false)// receiveMessage为逻辑解决办法

此办法能够用于实现跨源通信等，咱们来演示如何实现在两个窗口之间进行通信。 假如咱们当初有两个页面：page1.html和page2.html， 他们的关系是通过iframe关联起来的，就像这样（上面是page1.html的内容）： <iframe id="receiver" src="./page2.html" width="300" height="100"></iframe>为了实现通信，首先你须要在page2.html中注册事件监听： window.addEventListener('message', function (e) { console.log(e);});确保page2.html中事件监听注册好了当前，在page1.html中首先须要获取page2.html的窗口对象： var targetWindow = document.getElementById('receiver').contentWindow;而后，间接应用其中的postMessage即可发送： targetWindow.postMessage("你好呀！", "*");在理论应用中，两个页面不肯定须要通过iframe关联，比方应用window.location.href等也是能够的，不过有一个根本的准则要留神：发送信息的时候，肯定要确保接管方曾经实现了信息接管事件的注册。

postMessage 是 html5 引入的 API，postMessage 办法容许来自不同源的脚本采纳异步形式进行通信，其实同源不同页面的脚本也能够采纳 postMessage 办法进行通信。 介绍发送数据须要在接收数据窗口的全局对象下调用该办法。 targetWindow.postMessage(message, targetOrigin, [transfer])targetWindow：指标窗口的全局对象援用，比方 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames。message：将要发送到指标窗口的数据，能够是任何类型的数据。它将会被结构化克隆算法序列化。这意味着能够不受什么限度的将数据对象平安的传送给指标窗口而无需本人序列化。targetOrigin：指定指标窗口的 origin ，只有指标窗口的 origin 与 targetOrigin 对应，指标窗口才能够接管到数据。 *：示意能够发送数据到任何 origin 的窗口，但通常处于安全性思考不倡议这么做。/：示意能够发送给以后窗口的同源窗口。transfer：可选，是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给音讯的接管方，而发送一方将不再保有所有权。接收数据接收数据的窗口，监听 window 对象的 message 事件，从 event 对象里获取相干数据。 window.addEventListener('message', (event) => { const { data, origin, source } = event /* some code */})data：从其余 window 中传递过去的数据。origin：发送窗口的 origin，一个由“协定“、“://“、“域名"、“ : 端口号”拼接而成的字符串。source：对发送音讯的窗口对象的援用，能够应用此来在具备不同 origin 的两个窗口之间建设双向通信。平安发送数据的窗口，须要指定准确的指标窗口 origin ，而不是 * 。 接收数据的窗口，须要通过 event.origin 判断发送数据窗口的身份。 实例两个窗口之间的通信

文章不易，请关注公众号 毛毛虫的小小蜡笔，多多反对，谢谢。 概念window.name1、在一个窗口还没敞开之前，同一个窗口的所有页面都共享同一个window.name。 这个窗口可了解为chrome浏览器的一个tab标签页面。另外，从一个页面中跳转到另一个页面后，这些页面都共享同一个window.name。 2、每个页面都能读和写window.name。 这个可能就是平安问题的起源。 3、window.name在chrome上可存储小于等于2MB的数据。 postMessage能够平安地实现的跨源通信。 语法：otherWindow.postMessage(message, targetOrigin, [transfer]); 事件：window.addEventListener("message", receiveMessage, false);message的属性有:data, origin, source 平安问题比拟攻击者页面：A受害者页面：B 最初文章不易，请关注公众号 毛毛虫的小小蜡笔，多多反对，谢谢。有疑难和问题，请留言。如果感觉文章还能够，请点赞或珍藏，谢谢。

excel表格和wps表格是咱们存储数据罕用的工具，题目中的问题能够借助软件，金芝号码提取整顿助手，来筛选，软件作者的徽是veve188。 咱们在平时的工作中，想整顿材料关上一个表格的时候，发现外面有混淆的文本，比方手机号码、座机电话、汉字、字母等凌乱的货色在一个表格里，然而咱们不想要这些货色，只想在表格外面提取手机号码，那么问题来了：如何将表格中手机号筛选进去？只有装置软件，金芝号码提取整顿助手，那么就能够疾速从表格中独自把11位的手机号码批量提取进去。 简略的三步就能够实现题目中的工作。 第一步：关上你的excel或wps表格，全副把这些芜杂的货色复制好。 第二步：关上软件，金芝号码提取整顿助手，把方才复制好的粘贴到软件上来，点“号码独自提取”。 第三步：坐等号码筛选完结，点“导出excel或txt”，即可。其余的芜杂货色都去除了，很洁净很参差的号码，单列排好。

原文：https://pantao.parcmg.com/pre... 在做 React Native 应用时，如果需要在 App 里面内嵌 H5 页面，那么 H5 与 App 之间可以通过 Webview 的 PostMessage 功能实现实时的通讯，但是在小程序里面，虽然也提供了一个 webview 组件，但是，在进行 postMessage 通讯时，官方文档里面给出了一条很变态的说明： 网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }，data 是多次 postMessage 的参数组成的数组这里面已经说的很明白了，不管我们从 H5 页面里面 postMessage 多少次，小程序都是收不到的，除非： 用户做了回退到上一页的操作组件销毁用户点击了分享这里面其实我没有完全说对，官方其实说的是 小程序后退，并没有说是用户做回退操作，经过我的实测，确实人家表达得很清楚了，我们通过微信官方的SDK调起的回退也是完全可行的： wx.miniProgram.navigateBack()大体思路从上面的分析和实测中我们可以知道，要实现无需要用户操作即可完成的通讯，第三种情况我们是完全不需要考虑了的，那么来仔细考虑第 1 和第 2 种场景。 第 1 种方式：回退当我们想通过网页向小程序发送数据，同时还可以回退到上一个页面时，我们可以在 wx.miniProgram.postMessage 之后，立马调用一次 wx.miniProgram.navigateBack()，此时小程序的操作是： 处理 postMessage 信息回退到上一页我们在处理 postMessage 的时候做一些特殊操作，可以将这些数据保存下来 第 2 种方式：组件销毁这是我感觉最合适的一种方式，可以让小程序拿到数据，同时还保留在当前页面，只需要销毁一次 webview 即可，大概的流程就是： 小程序 postMessage小程序 navigateTo 将小程序页面导向一个特殊的页面小程序的那个特殊页面立马回退到 webview 所在的页面webview 所在的页面的 onShow 里面，做一次处理，将 webview 销毁，然后再次打开触发 onMessage 拿到数据H5 页面再次被打开这种方式虽然变态，但是至少可以做到实时拿到数据，同时还保留在当前 H5 页面，唯一需要解决的是，在做这整套操作前，H5 页面需要做好状态的缓存，要不然，再次打开之后，H5 的数据就清空了。 ...

遇到的坑：webview和h5通信时，会有一些延迟导致不能立即生效具体描述：在使用react-native时，需要加载外部网页，加载后，RN提供一个按钮可以关闭网页，但如果打开的是内部网页就需要隐藏这个按钮，h5代码使用react写的，在componentDidMount时，发送postmessage给客户端（RN），此时发现收不到，查阅react-native官方文档后得已解决。解决过程：https://github.com/facebook/r...，解释了为什么要延迟https://github.com/react-nati... 解释了，升级后的webview为什么postmessage不能直接用 import React from 'react';import { WebView } from 'react-native';export default class myComponent extends React.Component<any, any> { public hide(){ // 隐藏按钮的逻辑 // 建立一个白名单，在白名单里的域名隐藏按钮，之外的不做处理 } public render(): React.ReactNode { const { navigation } = this.props; const { state } = navigation; const { params } = state; return <WebView ref={'webview'} source={{ uri: params.url }} onLoadEnd={this.hide} />; }}感觉对你有帮助的话，支持一下哈：

平时在开发中总是会遇到各种跨域问题，一直没有很好地了解其中的原理，以及其各种实现方案。今天在这好好总结一下。本文完整的源代码请猛戳github博客，建议大家动手敲敲代码。1、什么是跨域？为什么会有跨域？一般来说，当一个请求url的协议、域名、端口三者之间任意一个与当前页面地址不同即为跨域。之所以会跨域，是因为受到了同源策略的限制，同源策略要求源相同才能正常进行通信，即协议、域名、端口号都完全一致。为什么会有同源策略呢？同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。设想这样一种情况：A网站是一家银行，用户登录以后，又去浏览其他网站。如果其他网站可以读取A网站的 Cookie，会发生什么？很显然，如果 Cookie 包含隐私（比如存款总额），这些信息就会泄漏。更可怕的是，Cookie 往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。因为浏览器同时还规定，提交表单不受同源政策的限制。由此可见，“同源政策"是必需的，否则 Cookie 可以共享，互联网就毫无安全可言了。同源策略限制内容有：Cookie、LocalStorage、IndexedDB 等存储性内容DOM 节点AJAX 请求发送后，结果被浏览器拦截了下面为允许跨域资源嵌入的示例，即一些不受同源策略影响的标签示例：<script src=”…"></script>标签嵌入跨域脚本。语法错误信息只能在同源脚本中捕捉到。<link rel=“stylesheet” href="…">标签嵌入CSS。由于CSS的松散的语法规则，CSS的跨域需要一个设置正确的Content-Type消息头。不同浏览器有不同的限制： IE, Firefox, Chrome, Safari 和 Opera。<img>嵌入图片。支持的图片格式包括PNG,JPEG,GIF,BMP,SVG<video> 和 <audio>嵌入多媒体资源。<object>, <embed> 和 <applet>的插件。@font-face引入的字体。一些浏览器允许跨域字体（ cross-origin fonts），一些需要同源字体（same-origin fonts）。<frame>和<iframe>载入的任何资源。站点可以使用X-Frame-Options消息头来阻止这种形式的跨域交互。常见的跨域场景URL 说明 是否允许通信http://www.domain.com/a.jshttp://www.domain.com/b.js 同一域名，不同文件或路径 允许http://www.domain.com/lab/c.jshttp://www.domain.com:8000/a.jshttp://www.domain.com/b.js 同一域名，不同端口 不允许 http://www.domain.com/a.jshttps://www.domain.com/b.js 同一域名，不同协议 不允许 http://www.domain.com/a.jshttp://192.168.4.12/b.js 域名和域名对应相同ip 不允许 http://www.domain.com/a.jshttp://x.domain.com/b.js 主域相同，子域不同 不允许http://domain.com/c.js http://www.domain1.com/a.jshttp://www.domain2.com/b.js 不同域名 不允许注意:关于跨域，有两个误区：1、动态请求就会有跨域的问题（错）。跨域只存在于浏览器端，不存在于安卓/ios/Node.js/python/ java等其它环境2、跨域就是请求发不出去了（错）。跨域请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了2、跨域的解决方案2.1、jsonpjsonp的跨域原理是利用script标签不受跨域限制而形成的一种方案。下面我们来简单看一下代码实现<!– index.html 文件 –><!DOCTYPE html><html lang=“en”><head> <meta charset=“UTF-8”> <title></title></head><body><script> var script = document.createElement(‘script’); script.type = ’text/javascript’; // 传参并指定回调执行函数为onBack script.src = ‘http://127.0.0.1:3000/login?user=admin&callback=onBack’; document.head.appendChild(script); // 回调执行函数 function onBack(res) { alert(JSON.stringify(res)); }</script></body></html>nodevar qs = require(‘querystring’);var http = require(‘http’);var server = http.createServer();server.on(‘request’, function(req, res) { console.log(req); var params = qs.parse(req.url.split(’?’)[1]); var fn = params.callback; // jsonp返回设置 res.writeHead(200, { ‘Content-Type’: ’text/javascript’ }); res.write(fn + ‘(’ + JSON.stringify(params) + ‘)’); res.end();});server.listen(‘3000’);console.log(‘Server is running at port 3000…’);我们可以看到返回的结果：优点：兼容性好（兼容低版本IE）缺点：1.JSONP只支持GET请求； 2.XMLHttpRequest相对于JSONP有着更好的错误处理机制2.2、postMessagepostMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一。语法：otherWindow.postMessage(message, targetOrigin, [transfer]);otherWindow:指目标窗口，也就是给哪个window发消息，是 window.frames 属性的成员或者由 window.open 方法创建的窗口;message 属性是要发送的消息，类型为 String、Object (IE8、9 不支持)；data 属性为 window.postMessage 的第一个参数；origin 属性表示调用window.postMessage() 方法时调用页面的当前状态；source 属性记录调用 window.postMessage() 方法的窗口信息;targetOrigin:属性来指定哪些窗口能接收到消息事件，其值可以是字符串""（表示无限制）或者一个URI。transfer:是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。看一下简单的demo<!– index.html 文件 –><!DOCTYPE html><html lang=“en”><head> <meta charset=“UTF-8”> <title></title></head><body><h1>AAAAAAAAAAAA</h1><iframe src=“http://localhost:4000/b.html” id=“frame” onload=“load()"></iframe><script> function load(params){ let iframe = document.getElementById(‘frame’); iframe.onload = function() { const data = { name: ‘aym’ }; //获取iframe中的窗口,给iframe里嵌入的window发消息 iframe.contentWindow.postMessage(JSON.stringify(data), ‘http://localhost:4000’); }; // 接收b.html回过来的消息 window.onmessage = function(e){ console.log(e.data) } }</script></body></html><!– b.html 文件 –><!DOCTYPE html><html lang=“en”><head> <meta charset=“UTF-8”> <title></title></head><body><h1>BBBBBBBBB</h1><script> window.addEventListener(‘message’, function(e) { console.log(‘data from domain1 —> ’ + e.data); let data = JSON.parse(e.data); if (data) { data.number = 16; // 处理后再发回domain1 window.parent.postMessage(JSON.stringify(data), ‘http://127.0.0.1:8080’); } }, false);</script></body></html>2.3、websocketWebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。原生WebSocket API使用起来不太方便，我们使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。<!– index.html 文件 –><!DOCTYPE html><html lang=“en”><head> <meta charset=“UTF-8”> <title></title></head><body><div>user input：<input type=“text”></div><script src=“https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.dev.js"></script><script> var socket = io(‘http://127.0.0.1:8080’); // 连接成功处理 socket.on(‘connect’, function() { // 监听服务端消息 socket.on(‘message’, function(msg) { console.log(‘data from server: —> ’ + msg); }); // 监听服务端关闭 socket.on(‘disconnect’, function() { console.log(‘Server socket has closed.’); }); }); document.getElementsByTagName(‘input’)[0].onblur = function() { socket.send(this.value); };</script></body></html>node服务端文件var http = require(‘http’);var socket = require(‘socket.io’);// 启http服务var server = http.createServer(function(req, res) { res.writeHead(200, { ‘Content-type’: ’text/html’ }); res.end();});server.listen(‘8080’);console.log(‘Server is running at port 8080…’);// 监听socket连接socket.listen(server).on(‘connection’, function(client) { // 接收信息 client.on(‘message’, function(msg) { client.send(‘hello：’ + msg); console.log(‘data from client: —> ’ + msg); }); // 断开处理 client.on(‘disconnect’, function() { console.log(‘Client socket has closed.’); });});2.4、Node中间件代理实现原理：同源策略是浏览器需要遵循的标准，而如果是服务器向服务器请求就无需遵循同源策略。主要访问路径客户端发出请求代理服务接受客户端请求 。大理服务将请求 转发给应用服务器。应用服务器接收到请求代理服务器求情 ，响应数据。代理服务器将响应数据转发给客户端。实现代码:前端代码示例：<!– index.html 文件 –><!DOCTYPE html><html lang=“en”><head> <meta charset=“UTF-8”> <title></title></head><body><h1>1111</h1><script src=“https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script> $.ajax({ url: ‘http://127.0.0.1:3000/login?user=admin&password=123’, success: function(result) { console.log(result) }, error: function(msg) { console.log(msg) } })</script></body></html>代理服务器var express = require(’express’);var proxy = require(‘http-proxy-middleware’);var app = express();var options = { dotfiles: ‘ignore’, etag: false, extensions: [‘htm’, ‘html’], index: false, maxAge: ‘1d’, redirect: false, setHeaders: function (res, path, stat) { res.set(‘x-timestamp’, Date.now()) }}app.use(express.static(‘public’, options))app.use(’/’, proxy({ // 代理跨域目标接口 target: ‘http://127.0.0.1:4000’, changeOrigin: true, // 修改响应头信息，实现跨域并允许带cookie onProxyRes: function(proxyRes, req, res) { res.header(‘Access-Control-Allow-Origin’, ‘http://127.0.0.1’); res.header(‘Access-Control-Allow-Credentials’, ’true’); }, // 修改响应信息中的cookie域名 cookieDomainRewrite: ‘127.0.0.1’ // 可以为false，表示不修改}));app.listen(3000);console.log(‘Proxy server is listen at port 3000…’);应用服务器// 服务器const http = require(“http”);const server = http.createServer();const qs = require(“querystring”);server.on(“request”, function(req, res) { var params = qs.parse(req.url.split(’?’)[1]); console.log(req.url, params); // 向前台写 cookie res.writeHead(200, { “Set-Cookie”: “l=a123456;Path=/;Domain=127.0.0.1;HttpOnly” // HttpOnly：脚本无法读取 }); res.write(JSON.stringify({ data: ‘I LOVE YOU’, …params })); res.end();});server.listen(“4000”);console.log(’listen 4000…’)最终效果2.5、nginx反向代理跨域原理： 同源策略是浏览器的安全策略，不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不需要同源策略，也就不存在跨越问题。实现思路：通过nginx配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录。：通过nginx配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录。nginx具体配置：#proxy服务器server { listen 81; server_name www.domain1.com; location / { proxy_pass http://www.domain2.com:8080; #反向代理 proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名 index index.html index.htm; # 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用 add_header Access-Control-Allow-Origin http://www.domain1.com; #当前端只跨域不带cookie时，可为 add_header Access-Control-Allow-Credentials true; }}Nodejs后台示例：var http = require(‘http’);var server = http.createServer();var qs = require(‘querystring’);server.on(‘request’, function(req, res) { var params = qs.parse(req.url.split(’?’)[1]); // 向前台写cookie res.writeHead(200, { ‘Set-Cookie’: ’l=a123456;Path=/;Domain=www.domain2.com;HttpOnly’ // HttpOnly:脚本无法读取 }); res.write(JSON.stringify(params)); res.end();});server.listen(‘8080’);console.log(‘Server is running at port 8080…’);前端代码示例：var xhr = new XMLHttpRequest();// 前端开关：浏览器是否读写cookiexhr.withCredentials = true;// 访问nginx中的代理服务器xhr.open(‘get’, ‘http://www.domain1.com:81/?user=admin', true);xhr.send();2.6、CORS普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。虽然设置 CORS 和前端没什么关系，但是通过这种方式解决跨域问题的话，会在发送请求时出现两种情况，分别为简单请求和复杂请求。简单请求只要同时满足以下两大条件，就属于简单请求1：使用下列方法之一：GET、HEAD、POST2：Content-Type 的值仅限于下列三者之一：text/plain、multipart/form-data、application/x-www-form-urlencoded复杂请求凡是不同时满足上面两个条件，就属于复杂请求。复杂请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求,该请求是 option 方法的，通过该请求来知道服务端是否允许跨域请求。我们用PUT向后台请求时，属于复杂请求，后台需做如下配置：// 允许哪个方法访问我res.setHeader(‘Access-Control-Allow-Methods’, ‘PUT’)// 预检的存活时间res.setHeader(‘Access-Control-Max-Age’, 6)// OPTIONS请求不做任何处理if (req.method === ‘OPTIONS’) { res.end() }// 定义后台返回的内容app.put(’/getData’, function(req, res) { console.log(req.headers) res.end(‘我不爱你’)})接下来我们看下一个完整复杂请求的例子，并且介绍下CORS请求相关的字段// index.htmllet xhr = new XMLHttpRequest()document.cookie = ’name=xiamen’ // cookie不能跨域xhr.withCredentials = true // 前端设置是否带cookiexhr.open(‘PUT’, ‘http://localhost:4000/getData’, true)xhr.setRequestHeader(’name’, ‘xiamen’)xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) { console.log(xhr.response) //得到响应头，后台需设置Access-Control-Expose-Headers console.log(xhr.getResponseHeader(’name’)) } }}xhr.send()//server1.jslet express = require(’express’);let app = express();app.use(express.static(__dirname));app.listen(3000);//server2.jslet express = require(’express’)let app = express()let whitList = [‘http://localhost:3000’] //设置白名单app.use(function(req, res, next) { let origin = req.headers.origin if (whitList.includes(origin)) { // 设置哪个源可以访问我 res.setHeader(‘Access-Control-Allow-Origin’, origin) // 允许携带哪个头访问我 res.setHeader(‘Access-Control-Allow-Headers’, ’name’) // 允许哪个方法访问我 res.setHeader(‘Access-Control-Allow-Methods’, ‘PUT’) // 允许携带cookie res.setHeader(‘Access-Control-Allow-Credentials’, true) // 预检的存活时间 res.setHeader(‘Access-Control-Max-Age’, 6) // 允许返回的头 res.setHeader(‘Access-Control-Expose-Headers’, ’name’) if (req.method === ‘OPTIONS’) { res.end() // OPTIONS请求不做任何处理 } } next()})app.put(’/getData’, function(req, res) { console.log(req.headers) res.setHeader(’name’, ‘jw’) //返回一个响应头，后台需设置 res.end(‘我不爱你’)})app.get(’/getData’, function(req, res) { console.log(req.headers) res.end(‘我不爱你’)})app.use(express.static(__dirname))app.listen(4000)2.7、location name +iframe原理：window.name属性的独特之处：name值在不同的页面（甚至不同域名）加载后依旧存在。下面a.html和b.html是同域的，都是http://localhost:3000;而c.html是http://localhost:4000// a.html(http://localhost:3000/b.html) <iframe src=“http://localhost:4000/c.html” frameborder=“0” onload=“load()” id=“iframe”></iframe> <script> let first = true // onload事件会触发2次，第1次加载跨域页，并留存数据于window.name function load() { if(first){ // 第1次onload(跨域页)成功后，切换到同域代理页面 let iframe = document.getElementById(‘iframe’); iframe.src = ‘http://localhost:3000/b.html’; first = false; }else{ // 第2次onload(同域b.html页)成功后，读取同域window.name中数据 console.log(iframe.contentWindow.name); } } </script>b.html为中间代理页，与a.html同域，内容为空。c页面 // c.html(http://localhost:4000/c.html) <script> window.name = ‘我不爱你’ </script>总结：通过iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操作。2.8、document. hash + iframe实现原理： a.html欲与c.html跨域相互通信，通过中间页b.html来实现。 三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。具体实现步骤：一开始a.html给c.html传一个hash值，然后c.html收到hash值后，再把hash值传递给b.html，最后b.html将结果放到a.html的hash值中。同样的，a.html和b.html是同域的，都是http://localhost:3000;而c.html是http://localhost:4000 // a.html <iframe src=“http://localhost:4000/c.html#iloveyou”></iframe> <script> window.onhashchange = function () { //检测hash的变化 console.log(location.hash); } </script> // b.html <script> window.parent.parent.location.hash = location.hash //b.html将结果放到a.html的hash值中，b.html可通过parent.parent访问a.html页面 </script> // c.html console.log(location.hash); let iframe = document.createElement(‘iframe’); iframe.src = ‘http://localhost:3000/b.html#idontloveyou’; document.body.appendChild(iframe);2.9、 document.domain + iframe实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。该方式只能用于二级域名相同的情况下，比如 a.test.com 和 b.test.com 适用于该方式。 只需要给页面添加 document.domain =‘test.com’ 表示二级域名都相同就可以实现跨域。我们看个例子：页面a.zf1.cn:3000/a.html获取页面b.zf1.cn:3000/b.html中a的值// a.html<body> helloa <iframe src=“http://b.zf1.cn:3000/b.html" frameborder=“0” onload=“load()” id=“frame”></iframe> <script> document.domain = ‘zf1.cn’ function load() { console.log(frame.contentWindow.a); } </script></body>// b.html<body> hellob <script> document.domain = ‘zf1.cn’ var a = 100; </script></body>3、总结日常工作中，用得比较多的跨域方案是cors和nginx反向代理CORS支持所有类型的HTTP请求，是跨域HTTP请求的根本解决方案不管是Node中间件代理还是nginx反向代理，主要是通过同源策略对服务器不加限制。SONP只支持GET请求，JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。后续更多文章将在我的github第一时间发布，欢迎关注。参考浏览器同源政策及其规避方法跨域资源共享 CORS 详解前端常见跨域解决方案（全） ...