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. 未能加载文件或程序集“System.Web.WebPages.Razor, Version=2.0.0.0, Culture=neutral, PublicKe

    https://bbs.csdn.net/topics/392046946 电脑没安装mvc4,应该是,解决这个问题一上午了今天,然后装完了后就好了! https://www.microsoft.co ...

  2. WEB安全学习二、注入工具 sqlmap的使用

    使用的是Kali Linux 系统,系统中默认的sqlmap 是安装好了的,电脑上没有安装sqlmap,自己百度  ,需要python的环境 使用 命令   sqlmap -h 可以查看   sqlm ...

  3. .NET 介绍

    In order to continue our effort of being modular and well factored we don’t just provide the entire ...

  4. Git、GitHub、GitLab三者之间的联系以及区别

    在讲区别以及联系之前先简要的介绍一下,这三者都是什么(本篇文章适合刚入门的新手,大佬请出门左转) 1.什么是 Git? Git 是一个版本控制系统. 版本控制是一种用于记录一个或多个文件内容变化,方便 ...

  5. OpenLayers中的球面墨卡托投影

    最近看OpenLayers,研究到地图投影时找到官方的文档,就翻译了一下,由于英文能力差,翻译不好的地方,请看原文 原文地址:http://docs.openlayers.org/library/sp ...

  6. 【BZOJ】1832: [AHOI2008]聚会

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1832 省选出出了CF的感觉..... 显然一发贪心,如果两个点显然就是他们的$LCA$(不 ...

  7. Matlab中的基本数据类型介绍

    Matlab中支持的数据类型包括: 逻辑(logical)字符(char)数值(numeric)元胞数组(cell)结构体(structure)表格(table)函数句柄(function handl ...

  8. Vscode中运行js文件或部分代码 ,在下面cmd输出中显示结果

    重启 vscode,  这个插件  真好用,, 赞个 ....

  9. BFC(块级格式化上下文)

    转载自:https://www.cnblogs.com/asheng2016/p/7281784.html https://blog.csdn.net/jiaojsun/article/details ...

  10. js 动画效果实现

    1. 实现方式 - 应用场景 自己写 - 简单的.不用 jq 的项目 jq - 普通动画 成熟插件 - 复杂动画 2. 相关文章 JavaScript基于时间的动画算法 九种原生js动画效果 Twee ...