location.hash跨域解决原理

1. 介绍location.hash

在浏览器中，location.hash是一个表示文档锚点的属性。当一个HTML文档的URL被加载到浏览器中时，如果URL包含一个#字符，那么#字符后面的内容就称为location的hash。例如，当我们打开下面这个URL时：

https://www.example.com/#about

location.hash的值就是“#about”。

2. location.hash的用途

location.hash最常见的用途是在单页应用程序中用于实现导航。在单页应用程序中，所有的页面内容都是在同一个HTML文件中的，URL的hash部分可以用来标识页面的不同区域。比如：

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

当用户点击上面的链接时，这些链接会更新浏览器的URL，并在URL中添加相应的hash值。单页应用程序可以通过监听window对象的hashchange事件来处理URL的变化，然后根据URL的hash值来更新页面的显示。

3. 跨域问题

通常情况下，location.hash只能用于同源的JavaScript之间进行通信。不同源的JavaScript是不能直接访问其他浏览器窗口或标签页中的location的，这样做是为了避免安全漏洞。

3.1 不同源如何访问location.hash

然而，有时候我们需要在不同源的JavaScript之间进行通信。比如，在两个不同的子域中有两个同样的页面，我们需要在子域之间传递一些信息。这时候，我们可以利用location.hash来传递信息。

具体操作步骤如下：

在一个页面中，使用JavaScript代码修改location.hash的值，并将需要传递的信息附加在hash值的后面（可以使用JSON字符串）。

在另一个页面中，通过定时器或者window.addEventListener('hashchange')来监听location.hash的变化，并解析其中的信息。

3.2 例子说明

以下是一个例子，演示了如何在两个不同的域名之间利用location.hash进行通信：

在example.com域名下的一个页面中，可以通过如下代码设置location.hash的值：

var data = { name: "John", age: 30 };
var json = JSON.stringify(data);
location.hash = encodeURIComponent(json);

在另外一个与example.com不同的域名下的页面中，可以通过如下代码监听location.hash的变化并解析其值：

var lastHash = "";
setInterval(function() {
  if (location.hash !== lastHash) {
    lastHash = location.hash;
    var json = decodeURIComponent(lastHash.substr(1));
    var data = JSON.parse(json);
    console.log(data.name);  // "John"
    console.log(data.age);   // 30
  }
}, 100);

4. 总结

location.hash是一个非常有用的特性，可以用于同源JavaScript之间的通信，也可以用于不同源JavaScript之间的通信。虽然跨域访问location.hash存在一定的限制，但是通过一些技巧，我们仍然可以实现跨域JavaScript之间的通信。