通过hash实现跨域通信

该方法跟window.name类似，有点神奇，有点绕，鲜有人用，但确实能够实现跨域通信。那么，我们下面详细讲解下如何利用hash实现跨域。

引例

  • 前提准备：
    1. a.html,起在localhost:3000上
    2. b.html,起在localhost:3000上
    3. 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种方法