1、location.hash + iframe
①.利用 iframe 、 location.hash 传值
②.a访问c，通过b来传播 (a、b同域名，c另外域名)
a.html
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>a.html</title></head>
<body>
<p>我是a.html页面</p>
<!-- 引入c.html页面 -->
<iframe src="http://01.tpqi-e.com/c.html#iloveyou"></iframe>
<script>
window.onhashchange = function () {
//检测hash的变化
console.log('a.html' + location.hash);
}
</script>
</body>
</html>
b.html
<!DOCTYPE html><html><head><meta charset="utf-8"><title>b.html</title></head>
<body>
<p>我是b.html页面</p>
<script>
window.parent.parent.location.hash = location.hash
//b.html将结果放到a.html的hash值中，b.html可通过parent.parent访问a.html页面
</script>
</body>
</html>
c.html
<!DOCTYPE html><html><head><meta charset="utf-8"><title>c.html</title></head>
<body>
<p>我是c.html页面</p>
<script type="text/javascript">
console.log('c.html' + location.hash);
// 1、创建"iframe"元素
let iframe = document.createElement('iframe');
// 2、创建"iframe"元素的src地址为b.html页面
iframe.src = 'http://www.xiaoheikeji.net/index/b.html#idontloveyou';
// 3、"iframe"元素添加到document.body里面 <body> <iframe></iframe> </body>
document.body.appendChild(iframe);
</script>
</body>
</html>
2、window.name + iframe
window.name 属性的独特之处：name 值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。
a页面通过iframe引入c页面，c页面的window.name可以被跨域访问，b页面代理访问window.name,a页面iframe改为b页面间接获取c页面数据
①.利用 iframe 、 window.name 传值
②.a访问c，通过b来传播 (a、b同域名，c另外域名)，b是空文件
//a.html <!DOCTYPE html><html><head><meta charset="utf-8" /><title>a页面</title></head> <body> a页面 <iframe src="http://01.tpqi-e.com/c.html" frameborder="0" onload="load()" id="iframe"></iframe> <script type="text/javascript"> let first = true // onload事件会触发2次，第1次加载跨域页，并留存数据于window.name function load() { if(first){ // 第1次onload(跨域页)成功后，切换到同域代理页面 let iframe = document.getElementById('iframe'); iframe.src = 'http://www.xiaoheikeji.net/index/b.html'; first = false; }else{ // 第2次onload(同域b.html页)成功后，读取同域window.name中数据 console.log(iframe.contentWindow.name); } } </script> </body> </html>
//c.html <!DOCTYPE html><html><head><meta charset="utf-8" /><title>c页面</title></head> <body> c页面 <script type="text/javascript"> window.name = '我是c页面的数据哟！' </script> </body> </html>
2、document.domain + iframe
主域名相同，二级域名不同
只需要给页面添加 document.domain ='aokete.com' 表示二级域名都相同就可以实现跨域。
实现原理：两个页面都通过 js 强制设置 document.domain 为基础主域，就实现了同域。
//a.html <!DOCTYPE html><html><head><meta charset="utf-8" /><title>A页面</title></head> <body> A页面 <iframe src="http://www.aokete.com/b.html" frameborder="0" onload="load()" id="frame"></iframe> <script> document.domain = 'aokete.com' function load() { console.log(frame.contentWindow.b); } </script> </body> </html>
//b.html <!DOCTYPE html><html><head><meta charset='utf-8' /><title>B页面</title></head> <body> B页面 <script> document.domain = 'aokete.com' var b = '我是B页面数据'; </script> </body> </html>
4.jsonp
<script>, 只支持get
5.cors
服务端设置 Access-Control-Allow-Origin 就可以开启 CORS
jsonp、postMessage、websocket、node、nginx
CORS 支持所有类型的 HTTP 请求，是跨域 HTTP 请求的根本解决方案
JSONP 只支持 GET 请求，JSONP 的优势在于支持老式浏览器，以及可以向不支持 CORS 的网站请求数据。
不管是 Node 中间件代理还是 nginx 反向代理，主要是通过同源策略对服务器不加限制。 日常工作中，用得比较多的跨域方案是 cors 和 nginx 反向代理
跨域
#图片
this.uh.crossOrigin = "anonymous"