location.hash + iframe 解决跨域问题

location.hash + iframe

• A和C同源，A和B非同源
• 页面A

  <iframe id="iframe" src="http://127.0.0.1:1002/B.html" style="display:none;"></iframe>
  <script>
  	let iframe = document.getElementById('iframe');
  	// => 向B.html传hash值
  	iframe.onload = function() {
  		// 后面多传了一个哈希值msg=zhufengpeixun
  		iframe.src = 'http://127.0.0.1:1002/B.html#msg=zhufengpeixun';
  	}
  
  	function func(res) {
  		alert(res);
  	}
  </script>
  

• 页面B

  <iframe id="iframe" src="http://127.0.0.1:1001/C.html" style="display:none;"></iframe>
  <script>
  	let iframe = document.getElementById('iframe');
  	// => 监听A传来的HASH值改变，再传给C.html
  	window.onhashchange = function () {
  		iframe.src = "http://www.zhufengpeixun.cn/C.html" + location.hash;
  	}
  </script>
  

• 页面C

  <script>
  	// => 监听B传来的HASH值
  	window.onhashchange = function () {
  		// => 再通过操作同域A的js回调，将结果传回
  		window.parent.parent.func(location.hash);
  	};
  </script>