• hash、hashchange事件


    1、hash即URL中"#"字符后面的部分。

      ①使用浏览器访问网页时,如果网页URL中带有hash,页面就会定位到id(或name)与hash值一样的元素的位置;

      ②hash还有另一个特点,它的改变不会导致页面重新加载;

      ③hash值浏览器是不会随请求发送到服务器端的;

      ④通过window.location.hash属性获取和设置hash值。

      window.location.hash值的变化会直接反应到浏览器地址栏(#后面的部分会发生变化),同时,浏览器地址栏hash值的变化也会触发window.location.hash值的变化,从而触发onhashchange事件。

    2、hashchange事件(IE8已支持该事件)

      ①当URL的片段标识符更改时,将触发hashchange事件(跟在#符号后面的URL部分,包括#符号)

      ②hashchange事件触发时,事件对象会有hash改变前的URL(oldURL)和hash改变后的URL(newURL)两个属性:

    window.addEventListener('hashchange',function(e) { console.log(e.oldURL);  console.log(e.newURL) },false);

    3、demo

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>history 测试</title>
    </head>
    <body>

    <p><input type="text" value="0" id="oTxt" /></p>
    <p><input type="button" value="+" id="oBtn" /></p>

    <script>
    var otxt = document.getElementById("oTxt");
    var oBtn = document.getElementById("oBtn");
    var n = 0;

    oBtn.addEventListener("click",function(){
    n++;
    add();
    },false);
    get();

    function add(){
    if("onhashchange" in window){ //如果浏览器的原生支持该事件
    window.location.hash = "#"+n;
    }
    }

    function get(){
    if("onhashchange" in window){ //如果浏览器的原生支持该事件
    window.addEventListener("hashchange",function(e){
    var hashVal = window.location.hash.substring(1);
    if(hashVal){
    n = hashVal;
    otxt.value = n;
    }
    },false);
    }
    }
    </script>
    </body>
    </html>

  • 相关阅读:
    NB-IoT成为3GPP后会有哪些优势
    NB-IOT覆盖范围有多大 NB-IOT的强覆盖是怎么实现的
    4G DTU无线数据透明传输终端
    NB-IoT DTU是什么 NB-IoT的优势有哪些
    4G DTU是什么 4G DTU的功能和特点
    LoRa技术的发展应用和LoRa应用设备
    4G DTU为什么要具有透传的功能
    跨链在SIPC.VIP上的使用流程
    SimpleChain 开发挑战赛邀你来报名啦
    SimpleChain区块链管理系统使用教程
  • 原文地址:https://www.cnblogs.com/carriezhao/p/6861319.html
Copyright © 2020-2023  润新知