location.hash

简介: location.hash

location.hashwindow.location 对象的一个属性,它返回URL的哈希部分(即“#”后面的部分)。哈希部分通常用于在页面内导航到特定的锚点,但它也可以用来在不同的页面或iframe之间传递信息。

特性和用法:

  1. 页面内导航

    • location.hash 可以被用来在页面内导航到特定的元素。当URL的哈希部分改变时,浏览器会滚动到页面中相应的锚点。
  2. 跨页面通信

    • 通过改变 location.hash 的值,可以在不同页面或iframe之间传递信息。这种方式不会引起页面刷新,因此非常适合实时通信。
  3. 不触发页面加载

    • 改变 location.hash 不会触发页面的重新加载,这使得它成为一个轻量级的通信方式。
  4. 使用示例

    // 设置哈希值
    window.location.hash = 'someValue';
    
    // 读取哈希值
    var hashValue = window.location.hash.substring(1); // 去掉前面的'#'
    console.log(hashValue); // 输出: someValue
    
  5. 监听哈希变化

    • 可以通过监听 hashchange 事件来响应哈希值的变化。
      window.addEventListener('hashchange', function() {
             
      var newHashValue = window.location.hash.substring(1);
      console.log('Hash changed to:', newHashValue);
      });
      
  6. 跨域iframe通信

    • 在跨域的iframe中,可以使用 location.hash 来与父页面通信。父页面可以通过监听 hashchange 事件来获取iframe中的哈希值变化。
  7. 安全性

    • location.hash 只能在同一个源的页面间共享,因此它是一个安全的通信方式。不同源的页面无法读取或修改 location.hash 的值。
  8. 兼容性

    • 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 可以作为一种简单但有效的跨域通信手段。

相关文章
|
1月前
|
存储 负载均衡 算法
Hash介绍与应用详解
哈希算法在计算机科学中有着广泛而重要的应用,从数据存储、数据完整性校验到密码安全和分布式系统中的负载均衡,哈希函数都发挥着关键作用。通过本文的介绍和示例代码,希望您能更好地理解哈希的基本概念和实际应用,并在您的项目中有效地应用这些知识。
184 3
|
5月前
|
安全
|
7月前
|
Shell
|
Web App开发 安全 JavaScript
hash与history
hash与history
|
存储 算法
|
存储 算法
hash
一.什么是hash 百度百科上的定义是: 是把任意长度的输入通过散列算法变换成固定长度的输出,该输出就是散列值。简单的说就是一种将任意长度的消息压缩到某一固定长度的消息摘要的函数。
108 0
|
前端开发 JavaScript
hash、chunkhash和contenthash
webpack 通用配置优化
134 0
hash、chunkhash和contenthash
|
存储
Admiral(双向BFS + Hash)
Problem Description Suppose that you are an admiral of a famous naval troop. Our naval forces have got 21 battleships.
1141 0