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、示例

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

原文地址：https://www.cnblogs.com/carriezhao/p/6861319.html

hash、hashchange事件的更多相关文章

  1. js中hash、hashchange事件

    1.hash即URL中"#"字符后面的部分. ①使用浏览器访问网页时,如果网页URL中带有hash,页面就会定位到id(或name)与hash值一样的元素的位置: ②hash还有另 ...

  2. hashchange事件的认识

    写过路由的同学都知道其原理是通过URL的改变,由导航信息来决定页面信息...表述的好像有点不准确 这么说吧,只要URL参数列表只要变化就会调用hashchange事件,此时event对象包括oldUR ...

  3. hashchange事件

    h5新增了hashchange事件,以便在URL参数列表(及URL中‘#’号后面的所有字符串),发生变化时通知开发人员. 之所以要添加这个事件,是因为在Ajax应用中,开发人员经常要利用URL参数列表 ...

  4. jQuery不支持hashchange事件？

    $(window) .bind( 'hashchange', onHashchange ) .trigger( 'hashchange' ); jQuery版本是1.9.1的,去源码里没找到hashc ...

  5. Js的History对象

    History回顾 window.history表示window对象的历史记录 window.history的简单回顾 历史记录中前进/后退,移动到指定历史记录点 window.history.bac ...

  6. onhashchange事件，只需要修改hash值即可响应onhashchange事件中的函数（适用于上一题下一题和跳转页面等功能）

    使用实例: 使用onhashchange事件做一个简单的上一页下一页功能,并且当刷新页面时停留在当前页 html: <!DOCTYPE html><html><body& ...

  7. 简单的基于hash和hashchange的前端路由

    hash定义 hash这个玩意是地址栏上#及后面部分,代表网页中的一个位置,#后面部分为位置标识符.页面打开后,会自动滚动到指定位置处. 位置标识符 ,一是使用锚点,比如<a name=&quo ...

  8. 【html5】hashchange Event – 监测URL的hash变化

    通过URL传值,在?后附加以=连接的键值对,各键值对间以&连接:也可以通过URL传递页面参数,在”#”后附加的方式.两者最大的一个 区别在于:后者不会发起请求,不会导致页面刷新.常见应用场景在 ...

  9. JavaScript事件流原理解析

    一.为什么会有这一篇的文章 国庆前几天由于任务比较重,要赶在国庆前把一个进度的任务开发完成,所以也就有点赶,但是却遇到了一个比较奇怪的Bug,导致了任务比预计的延迟了几个小时,对此深表遗憾,所以利用国 ...

随机推荐

  1. MVC 之 初识(一)

    创建一个mvc项目,在项目中会startup.cs文件,startup文件主要是将项目寻找一个宿主 过去,项目一般都是寄宿在iis上的,通过owin可以寄宿到不同的宿主. 可以关闭owin:<a ...

  2. 集合05_Collections工具类

    Collections工具类 提供大量方法用于操作集合,比如排序,查找,替换 同步控制 提供synchronizedXxx()方法将指定集合类包装成线程同步的集合. List<String> ...

  3. 集合04_Set

    Set集合总览 集合元素无序.不重复,三个实现类都是线程不安全的,最好在创建时通过Collections工具类的synchronizedSortedSet方法来包装Set集合,防止对set集合的意外非 ...

  4. nginx 配置 https 请求

    1,先去这个网站申请一下证书 https://certmall.trustauth.cn/Home/Member/index/id/1521167511.html 上面会教你怎么去做. 2,就是配置自 ...

  5. Paper Reading: In Defense of the Triplet Loss for Person Re-Identification

    In Defense of the Triplet Loss for Person Re-Identification  2017-07-02  14:04:20   This blog comes ...

  6. HDU 4918 Query on the subtree（动态点分治+树状数组）

    题意 给定一棵 \(n\) 个节点的树,每个节点有点权.完成 \(q\) 个操作--操作分两种:修改点 \(x\) 的点权.查询与 \(x\) 距离小于等于 \(d\) 的权值总和. \(1 \leq ...

  7. HDFS 的垃圾回收配置

    HDFS的垃圾回收  的默认配置的 0,也就是说,如果你不小心误删除了某样东西,那么这个操作是不可恢复的. 但是如果配置了HDFS的垃圾回收机制,那么删除的东西就可以在垃圾箱中保存一段你配置的时间,等 ...

  8. HDU 1403 Longest Common Substring（最长公共子串）

    http://acm.hdu.edu.cn/showproblem.php?pid=1403 题意:给出两个字符串,求最长公共子串的长度. 思路: 刚开始学后缀数组,确实感觉很难,但是这东西很强大,所 ...

  9. Linux Shell脚本攻略：shell中各种括号()、(())、[]、[[]]、{}的作用

    技巧小结: 字符串比较用双中括号[[ ]]:算数比较用单中括号[ ]——左右留空格 算数运算用双小括号(( )) :shell命令及输出用小括号( )——左右不留空格 快速替换用花括号{ }——左右留 ...

  10. python+win32+ie浏览器操作 TypeError: getElementById() takes exactly 1 argument (2 given)

    使用body操作 # -*- coding:UTF- -*- import win32com.client from time import sleep second=win32com.client. ...