网站首页 > 教程文章正文

js中hash、hashchange事件

jxf315 2024-12-02 21:23:56 教程文章 39 ℃

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）两个属性：

<!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>

上一篇： IFRAME的各种经验总结
下一篇： js基础面试题131-160道题目

网站首页 > 教程文章 正文

js中hash、hashchange事件

猜你喜欢

网站首页 > 教程文章正文