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:新宋体;"> |
---|
只需要修改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:新宋体;"> |
---|
答:安插在段时,会提前加载,按需加载就放到或之后,加载顺序是:先段 -> 段 -> 之后。
可以将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>) |
---|