hash和hashchange事件

原创 2018年04月17日 17:31:02

window.location.href和window.locaiton.hash

(1)window.location.href  得到的是完整的URL

        比如:window.location.href = ' www.baidu.com'

(2)window.location.hash  得到的是锚链接

        比如:window.location.hash= ' #all'

(3)window.location.search得到的是URL‘?’号后面的字符串部分

        www.baidu.com/?username=aaa&age=10

        比如:window.location.search= ' ?username=aaa&age=10'


hash 属性 即URL字符串中从#号开始的部分(从 # 号开始的部分)

(1)使用浏览器访问网页时,如果网页url中带有hash ‘#123’,那么页面就会定位到id或者name为123的元素的位置;

(2)hash改变的话,不会导致页面重新加载(页面只需要一次加载,速度快);

window.location.hash值的变化以及浏览器地址栏(#号后面的值发生变化)任何一方发生变化,都会触发onhashchange事件

hashchange事件

    window.addEventListener('hashchange',function(){

        console.log(111);

    });

        addEventListener() 方法,事件监听,你也可以使用removeEventListener()方法来移除事件监听;

        element.addEventListener(event,fun,bool);

        (1)event: 事件类型(如‘click’)

        (2)fun: 事件触发后的回调函数;

        (3)bool:布尔值,用于描述事件是冒泡还是捕获,可选;

Demo(利于hash实现标签页(tab页))

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hash</title>
    <script src="js/jquery-1.11.3.min.js"></script>
    <style>
        *{
            margin:0; padding:0;
        }
        body{
            margin:100px;
        }
        a{
            text-decoration: none;
            color:#fff;
        }
        .task-list{
            list-style: none;
            overflow: hidden;
            width: 500px;
            margin:auto;
            padding: 10px;
            border:1px solid #DCDCDC;
            border-bottom:none;
            background: #2aabd2;
        }
        .task-list li{
            float: left;
            margin-right: 30px;
        }
        .task-list li>a{
            padding:10px 15px;
        }
        .task-content{
            width: 500px;
            margin:auto;
            height:300px;
            padding: 10px;
            border:1px solid #DCDCDC;
        }
        .task-content div{
            display: none;
            padding: 15px;
        }
        .task-content div.active{
            display: block;
        }
    </style>
</head>
<body>
    <ul class="task-list">
        <li><a href="#all">所有任务</a></li>
        <li><a href="#unfinished">未完成任务</a></li>
        <li><a href="#finished">完成任务</a></li>
    </ul>
    <div class="task-content">
        <div id="all" class="active">所有任务11</div>
        <div id="unfinished">未完成任务22</div>
        <div id="finished">完成任务33</div>
    </div>
    <script>
        var hashStr;
        function watchHash(){
            var hash = window.location.hash.slice(1);
            hashStr = hash;
            console.log(hashStr);
            if(hashStr){
                $('#'+hashStr).show();
                $('#'+hashStr).siblings().hide();
            }
        }
        watchHash();
        window.addEventListener("hashchange",watchHash);

    </script>
</body>
</html>

附图:


版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_36671474/article/details/79975846

Part 10:Cocos2d-x用户事件

了解Cocos2d-x的用户输入事件处理,这些事件包括:触摸事件、键盘事件、鼠标事件、加速度事件和自定义事件等。
  • 2016年04月11日 17:28

Hash、onHashChange事件

现在的web应用程序越来越多的使用ajax异步请求完成页面的无缝刷新,导致浏览器的URL不会发生任何变化而完成了请求, 从而破换了用户浏览体验。同时本次浏览的页面内容在用户下次使用URL访问时将无法重...
  • xieguojun2008
  • xieguojun2008
  • 2013-10-01 15:47:50
  • 4603

ajax请求带来的问题-----通过jQuery hashchange解决

在使用ajax做局部刷新的时候会产生一个问题,用户会以为整页做了刷新,当用户点击回退、前进历史按钮的时候,会跳到之前的页面。(这个问题在SPA 单页面应用的时候尤为明显)。 但是可以通过locati...
  • buliuhu123
  • buliuhu123
  • 2015-06-09 10:17:26
  • 2369

hashchange Event – 监测URL的hash变化

转载自:http://www.impng.com/web-dev/hashchange-event-and-onhashchange.html hashchange Event – 监测URL的...
  • FuDesign2008
  • FuDesign2008
  • 2011-12-22 10:51:04
  • 3945

onhashchange事件

onhashchange 事件:是一个新的事件,改事件在location.hash发生改变的时候触发。FF3.6a2, IE 8, Chrome 4.0.206.1均支持该事件。该事件在ajax无刷...
  • chen_wen_xian
  • chen_wen_xian
  • 2013-05-25 21:30:44
  • 3399

JQuery HashChange插件修改

在做AJAX的时候前进、后退按钮的处理是比较重要的,可以使用location.hash来解决这个问题。原理这里不再重复,为了方便,我使用了JQuery的HashChange插件,不过这个插件用起来不好...
  • cownew
  • cownew
  • 2011-01-15 16:48:00
  • 3603

埋点时,hash 改变没出发 hashChange 事件

埋点时,hash 改变没出发 hashChange 事件 问题描述 个人中心埋点时,跳转路由没有触发 hashChange 事件 解决方案 vue 2.8.0 以上;vue 触...
  • yang450712123
  • yang450712123
  • 2018-02-06 08:35:54
  • 108

location.hash的用法及onhashchange (精华,建议大家没事读一下)

location.hash是什么: 熟悉HTML都知道喵链接,没错,location.hash就是获取或设置喵链接的。上面的用法相信大家都知道,但是下面的就要考细节了。 当我们载入一个页面后...
  • babybk
  • babybk
  • 2016-05-08 21:36:38
  • 2891

AngularJS 路由和多视图 之 hashchange

路由 一个应用由若个视图组合而成, 根据不同的业务逻辑展示给用户不同的视图, 路由是实现这一功能的关键。--> 五...
  • sun0789
  • sun0789
  • 2016-11-20 00:41:23
  • 971

hash、hashchange事件

1、hash即URL中&quot;#&quot;字符后面的部分。  ①使用浏览器访问网页时,如果网页URL中带有hash,页面就会定位到id(或name)与hash值一样的元素的位置;  ②hash还...
  • damon940111
  • damon940111
  • 2018-02-25 00:38:49
  • 21
收藏助手
不良信息举报
您举报文章:hash和hashchange事件
举报原因:
原因补充:

(最多只允许输入30个字)