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

相关文章
|
5月前
|
安全
|
7月前
|
PHP
Trying to access array offset on value of type null
你就可以避免在null值上尝试访问数组偏移量的错误。 总的来说,当你遇到这个错误时,你应该回顾你的代码,确保在尝试访问数组偏移量之前,相关的变量已经被正确地初始化为一个数组,并且不是null。
1795 4
|
Web App开发 安全 JavaScript
hash与history
hash与history
|
存储 算法
|
关系型数据库 Perl
20171228db_link的full_hash_value值的计算
[20171228]db_link的full_hash_value值的计算.txt SCOTT@book> @ &r/ver1 PORT_STRING                    VERSION        BANNER -----------...
1248 0
|
SQL Oracle 关系型数据库
[20171211]HASH GROUP BY ?354?.txt
[20171211]HASH GROUP BY not used when using more that 354 aggregate functions.txt --//http://msutic.
1242 0
|
缓存 算法 网络协议
为什么 window.location.search 为空?
1,什么是window.location?示例 URL:http://b.a.com:88/index.php?name=kang&when=2011#first 属性 含义 值 protocol: 协议 "http:" hostname: 服务器的名字 "b.
1806 0