专栏首页蓝天HTML之onhashchange

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

提问:HTML中的document和windows有何区别?

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • linux core文件机制

    在程序不寻常退出时,内核会在当前工作目录下生成一个core文件(是一个内存映像,同时加上调试信息)。使用gdb来查看core文件,可以指示出导致程序出错的代码所...

    一见
  • PRId64的正确用法

    #include #include #include // g++ -g -o x x.cpp -D__STDC_FORMAT_MACROS ...

    一见
  • 零停重启程序工具Huptime研究

    零停重启目标程序,比如一个网络服务程序,不用丢失和中断任何消息实现重新启动,正在处理的消息也不会中断和丢失,重启的方法是给目标程序的进程发SIGHUP信号。...

    一见
  • django2用模板代码图标字体丢失报404 cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff

    玩蛇的胖纸
  • 前端开发:font属性与font-variant如何使用?

    font-variant 属性是font-variant-caps, font-variant-numeric, font-variant-alternates...

    程序员LIYI
  • 让你的网站用上炫酷的中文字体

    随着当前 Web 技术的日新月异,网页界面内容越来越丰富,让人眼花缭乱,其中就包括了网页中的各种自定义字体。

    米开朗基杨
  • @font-face 属性

    @font-face 允许网页开发者为其网页指定在线字体。 通过这种作者自备字体的方式,@font-face 可以消除对用户电脑字体的依赖。 @font-f...

    Html5知典
  • CSS3 font 学习笔记

    LRainner
  • Ios8之后, 定位的delegate不能触发的问题

    FlyLolo
  • HTML5基础——文字常用标签(上)

    一、微文概览 标题 字体与字号 颜色 二、详细介绍 1. 标题 我们在HTML文件中写一篇文字时,总会希望将标题的文字设置的大一些,黑一些,粗一些,那么怎样在H...

    用户1667431

扫码关注云+社区

领取腾讯云代金券