zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    js sort方法根据数组中对象的某一个属性值进行排序
    JS中数据类型转换
    DOM盒子模型常用属性client,offset和scroll
    Vue之render渲染函数和JSX的应用
    北漂程序员的真实奋斗史:有辛酸,更有成长
    比高房价更可怕的是,35岁以后你还能干嘛?
    Vue组件间通信方式
    根据对象的某个属性名的值从新排序
    JS隐藏号码中间4位
    javascript之揭示模式
  • 原文地址:https://www.cnblogs.com/zhx119/p/9728130.html
Copyright © 2011-2022 走看看