BOM中的Location.hash用法

最新推荐文章于 2023-03-28 11:14:20 发布

黑夜来袭Z

最新推荐文章于 2023-03-28 11:14:20 发布

阅读量388

点赞数

分类专栏： DOM 文章标签： javascript

本文链接：https://blog.csdn.net/z1844306480/article/details/110131176

版权

DOM 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、当前页面:可以通过location.hash进行设置

 location.hash = 'sss'
            console.log(location.hash);

设置后可以通过location.hash访问

会将该值拼接到url上

用法:在要跳转的html元素上设置name属性，然后设置location.hash值就可以实现页面内跳转。注意：如果跳转后如果location.hash不清空就无法继续跳转。

<html>

<head>
    <style>
        .box {
            width: 200px;
            height: 3000px;
            background-color: pink;
        }
        
        .box2 {
            width: 100px;
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <a name="sss">ssss</a>
    <script type="text/javascript">
        var box = document.querySelector('.box');
        box.addEventListener('click', function() {
            location.hash = 'sss'
            console.log(location.hash);
        });
    </script>
</body>

</html>

2、跳转到其他页面

w3c中给出的例子:

  var x = window.open("test.html", "", "scrollbars=yes,width=250,height=200")
             x.location.hash = '3';

实测通过这种方式location.hash的值无法在浏览器控制台显示，并且url后面也没有location.hash的值（有没有懂的解释下）

解决方案:(1)直接在当前页面拼接url地址

var x = window.open("test.html#sss", "", "scrollbars=yes,width=250,height=200")

（2）在跳转页面通过load事件给location.hash赋值

 window.addEventListener('load', function() {
            // location.hash = 3;
            console.log(location.hash);
        })

黑夜来袭Z

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BOM中的Location.hash用法

一、当前页面:可以通过location.hash进行设置 location.hash = 'sss' console.log(location.hash);设置后可以通过location.hash访问会将该值拼接到url上用法:在要跳转的html元素上设置name属性，然后设置location.hash值就可以实现页面内跳转。注意：如果跳转后如果location.hash不清空就无法继续跳转。<html><head>
复制链接

扫一扫

专栏目录