通过hash实现跨域通信
该方法跟window.name类似，有点神奇，有点绕，鲜有人用，但确实能够实现跨域通信。那么，我们下面详细讲解下如何利用hash实现跨域。
引例
- 前提准备：
- a.html,起在localhost:3000上
- b.html,起在localhost:3000上
- c.html,起在localhost:4000上
可见a和b是同域的，c是独立的
- 需求：在a页面获取c页面发送的数据。
- 思路:a给c传一个hash值，c收到hash值后，c把hash值传递给b，b把结果放到a的hash中
- 代码：
//a.html <!DOCTYPE html> <html> <head> <title></title> </head> <body> <iframe src="http://localhost:4000/c.html#yuhua"></iframe> <script type="text/javascript"> //hash一变化，就获取变化后的hash值，这个hash值就是a传给c，c得到后响应，返回给b，b传递给a的 window.onhashchange = function(){ console.log(location.hash); } </script> </body> </html> //b.html <!DOCTYPE html> <html> <head> <title></title> </head> <body> <!-- window 当前b的window window.parent b的父级，也就是c window.parent.parent b的爷爷，也就是c的爸爸，也就是a --> <script type="text/javascript"> window.parent.parent.location.hash = location.hash; </script> </body> </html> //c.html <!DOCTYPE html> <html> <head> <title></title> </head> <body> <script type="text/javascript"> let iframe = document.createElement("iframe"); iframe.src = 'http://localhost:3000/b.html#18'; document.body.appendChild(iframe); </script> </body> </html> - 现象：结果为#18
- 原因分析：
访问a.html会加载c.html，并把值放在c的iframe的hash中，
然后c载入后，会加载b.html，并把值放在b的iframe的hash中，
而a和b是同域的，那么也就是说b的hash可以直接复制给a的hash，这样a就得到了c的值
实现跨域的9种方法(点击可跳转详情页面)
- jsonp
- cors
- postMessage
- document.domain
- window.name
- location.hash
- http-proxy 后续会有详细文章阐述
- nginx 后续会有详细版块阐述
- websocket
155
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
