HTML之onhashchange
1. onhashchange介绍
onhashchange是HTML5的特性，当前主流的新版本浏览器都支持，但IE7、IE6不支持。
对于一个URL，如：http://aquester.cublog.cn#abc123，“#”后面的abc123即为hash内容，当它发生变化时，即会触发onhashchange事件，即使仅由http://aquester.cublog.cn变成http://aquester.cublog.cn#也会触发onhashchange事件。触发的方式可以是代码中改变，也可以是浏览器URL地址栏手工（Chrome中需要敲回车键）改变。
可以使用“if ("onhashchange" in window) {”来检测浏览器是否支持onhashchange特性。
安插onhashchange的两种方式：
1) 作为的属性
onhashchange="onchange()"> |
|---|
这种方式下，onchange()函数的定义位置没有要求，可以在 段，也可以在段，也可以放在段之后。
2) 作为windows对象的属性值
if ("onhashchange" in window) { window.onhashchange = onchange; } |
|---|
从上可以看出，onhashchange是window对象的属性。
在这种方式下，onchange()函数的定义位置需要位于“window.onhashchange = onchange;”语句之前，如：
hash </span> </p> <p> <span style="font-size:9.0pt;font-family:新宋体;"> function onchange()</span> </p> <p> <span style="font-size:9.0pt;font-family:新宋体;"> {</span> </p> <p> <span style="font-size:9.0pt;font-family:新宋体;"> document.getElementById("a").innerHTML = location.hash + ':2015';</span> </p> <p> <span style="font-size:9.0pt;font-family:新宋体;"> }</span> </p> <p> <span style="font-size:9.0pt;font-family:新宋体;"> </span> </p> <p> <span style="font-size:9.0pt;font-family:新宋体;"> window.<b>onhashchange</b> = onchange;</span> </p> <p> <span style="font-size:9.0pt;font-family:新宋体;"> |
|---|
2. 如何触发onhashchange？
只需要修改localtion.hash，即会触发onhashchange，如：
onhashchange onhashchange="onchange()"> 123 Click Me! </span> </p> <p> <span style="font-size:9.0pt;font-family:新宋体;"> function change()</span> </p> <p> <span style="font-size:9.0pt;font-family:新宋体;"> {</span> </p> <p> <span style="font-size:9.0pt;font-family:新宋体;"> location.href='#hello';</span> </p> <p> <span style="font-size:9.0pt;font-family:新宋体;"> }</span> </p> <p> <span style="font-size:9.0pt;font-family:新宋体;"> </span> </p> <p> <span style="font-size:9.0pt;font-family:新宋体;"> function onchange()</span> </p> <p> <span style="font-size:9.0pt;font-family:新宋体;"> {</span> </p> <p> <span style="font-size:9.0pt;font-family:新宋体;"> document.getElementById("a").innerHTML = location.hash + ':2015';</span> </p> <p> <span style="font-size:9.0pt;font-family:新宋体;"> }</span> </p> <p> <span style="font-size:9.0pt;font-family:新宋体;"> |
|---|
附1：JS脚本安插在段和段的区别是什么？
答：安插在段时，会提前加载，按需加载就放到或之后，加载顺序是：先段 -> 段 -> 之后。
附2：location介绍
可以将location简单理解成浏览器的地址栏，它有多个属性，可以浏览https://developer.mozilla.org/zh-CN/docs/Web/API/Location加以了解，常见的如：
location属性名 | location属性说明 |
|---|---|
href | 完整的URL，包括#部分 |
hash | 仅指URL的#部分 |
protocol | 协议名称，如：http:，注意包括了一个冒号 |
host | URL的域名部分，如：aquester.cublog.cn |
pathname | URL的域名之后的部分，如：http://aquester.cublog.cn/index.html中的“/index.html”为pathname，总是以“/”打头。 |
可以通过下面这样的代码来体验location各属性的值：
<b>document</b>.write(location.<b>pathname</b>) |
|---|