专栏首页蓝天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 条评论
登录 后参与评论

相关文章

  • UBUNTU 16.04 LTS 使用体验(纪念LINUX-25周年)

      Canonical在4月底正式发布了Ubuntu 16.04 LTS,这是一个长期支持版本,官方表示会提供长达5年的技术支持(包括常规更新/Bug修复/安全...

    csxiaoyao
  • 宏中"#"和"##"的用法

    一、一般用法  我们使用#把宏参数变为一个字符串,用##把两个宏参数贴合在一起.   用法:   #include<cstdio>   #include<cl...

    阳光岛主
  • 互动直播的视频录制与合成—支持多人离线重入

    业务场景是这样的:多个用户(2-4人)直播的视频,合成为一个视频,这期间要满足2个条件:首先,录制途中可能有一个或多个用户不定次数的离线、重进(网络差和人为操作...

    王磊的博客
  • Linux网络编程IPv4和IPv6的inet_addr、inet_aton、inet_pton等函数小结

    210.25.132.181属于IP地址的ASCII表示法,也就是字符串形式。英语叫做IPv4 numbers-and-dots notation。

    阳光岛主
  • Linux多线程Pthread学习小结

    POSIX thread 简称为pthread,Posix线程是一个POSIX标准线程.该标准定义内部API创建和操纵线程.

    阳光岛主
  • JVM(二)Java虚拟机组成详解

    Java虚拟机(Java Virtual Machine)下文简称jvm,上一篇我们对jvm有了大体的认识,进入本文之后我们将具体而详细的介绍jvm的方方面面,...

    王磊的博客
  • Yahoo! 十三条 : 前端网页优化(13+1)条原则

      据统计,有80%的最终用户响应时间是花在前端程序上,而其大部分时间则花在各种页面元素,如图像、样式表、脚本和Flash等的下载上,减少页面元素将会减少HTT...

    csxiaoyao
  • 学习编程技术的成长之路

    只要有一本好书,有一个舞台,每一个人都可能成为大牛级的高手,希望大家通过我精心搜集的这些网站找到自己的兴趣爱好,以增强自己的信心。

    阳光岛主
  • 系统学习javaweb-08-学习速查案例02

    名称:酒店订餐系统 目的:常见的javaweb的一些写法总结 说明:未使用javaweb框架,数据使用mysql,根目录下有sql脚本,用户名密码写...

    csxiaoyao
  • Apache 绿色版本官方版本下载

    在网上搜了一圈,没有找到合适的精简Apache绿色版本,都要收取C币。 记录一下怎么在官网找到编译好的 windows 绿色版本,即加压即可用。

    叉叉敌

扫码关注云+社区

领取腾讯云代金券