location.hash
是 window.location
对象的一个属性,它返回URL的哈希部分(即“#”后面的部分)。哈希部分通常用于在页面内导航到特定的锚点,但它也可以用来在不同的页面或iframe之间传递信息。
特性和用法:
页面内导航:
location.hash
可以被用来在页面内导航到特定的元素。当URL的哈希部分改变时,浏览器会滚动到页面中相应的锚点。
跨页面通信:
- 通过改变
location.hash
的值,可以在不同页面或iframe之间传递信息。这种方式不会引起页面刷新,因此非常适合实时通信。
- 通过改变
不触发页面加载:
- 改变
location.hash
不会触发页面的重新加载,这使得它成为一个轻量级的通信方式。
- 改变
使用示例:
// 设置哈希值 window.location.hash = 'someValue'; // 读取哈希值 var hashValue = window.location.hash.substring(1); // 去掉前面的'#' console.log(hashValue); // 输出: someValue
监听哈希变化:
- 可以通过监听
hashchange
事件来响应哈希值的变化。window.addEventListener('hashchange', function() { var newHashValue = window.location.hash.substring(1); console.log('Hash changed to:', newHashValue); });
- 可以通过监听
跨域iframe通信:
- 在跨域的iframe中,可以使用
location.hash
来与父页面通信。父页面可以通过监听hashchange
事件来获取iframe中的哈希值变化。
- 在跨域的iframe中,可以使用
安全性:
location.hash
只能在同一个源的页面间共享,因此它是一个安全的通信方式。不同源的页面无法读取或修改location.hash
的值。
兼容性:
location.hash
被所有现代浏览器支持,是一个非常可靠的特性。
跨域iframe通信示例:
假设你有一个父页面和一个跨域的iframe,你可以使用 location.hash
来在它们之间传递信息:
父页面:
<!DOCTYPE html>
<html>
<head>
<title>Parent Page</title>
</head>
<body>
<iframe src="https://anotherdomain.com/iframe.html" id="myIframe"></iframe>
<script>
window.addEventListener('hashchange', function() {
var iframe = document.getElementById('myIframe');
var hashValue = window.location.hash.substring(1);
iframe.contentWindow.postMessage(hashValue, 'https://anotherdomain.com');
});
</script>
</body>
</html>
iframe页面:
<!DOCTYPE html>
<html>
<head>
<title>Iframe Page</title>
</head>
<body>
<script>
window.addEventListener('load', function() {
window.location.hash = 'initialValue';
});
</script>
</body>
</html>
在这个示例中,当iframe页面加载完成后,它会设置一个初始的哈希值。父页面监听 hashchange
事件,并在哈希值变化时通过 postMessage
将这个值传递给iframe。
通过这种方式,location.hash
可以作为一种简单但有效的跨域通信手段。