<!DOCTYPE html>
<html>
<head>
<title>Hash Change Example</title>
<script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
<p>Click each of these links to change the URL hash.</p>
<ul>
<li><a href="#up">Up</a></li>
<li><a href="#down">Down</a></li>
</ul>
<p>This example only works in browsers that <code>onhashchange</code>.</p>
<script type="text/javascript">
EventUtil.addHandler(window, "hashchange", function(event){
alert("Old URL: " + event.oldURL + "\nNew URL: " + event.newURL);
});
$(function(){
  var hashValue = location.hash.slice(1);
  if(hashValue) {
    $(window).trigger("hashchange");
  }  
});
</script>
</body>
</html>

hashchange事件支持 IE8 FF3.6 chrome opera

event.oldURL, newURL 只有FF6, chrome opera

hashchange的更多相关文章

  1. 理解浏览器历史记录(2)-hashchange、pushState

    本文也是一篇基础文章.继上文之后,本打算去研究pushState,偶然在一些信息中发现了锚点变化对浏览器的历史记录也会影响,同时锚点的变化跟pushState也有一些关联.所以就花了点时间,把这两个东 ...

  2. hashchange事件的认识

    写过路由的同学都知道其原理是通过URL的改变,由导航信息来决定页面信息...表述的好像有点不准确 这么说吧,只要URL参数列表只要变化就会调用hashchange事件,此时event对象包括oldUR ...

  3. jQuery不支持hashchange事件?

    $(window) .bind( 'hashchange', onHashchange ) .trigger( 'hashchange' ); jQuery版本是1.9.1的,去源码里没找到hashc ...

  4. AJAX保留浏览历史的解决方案——hashchange()

    在ajax请求中,不能更新地址栏,地址栏上的“前进”和“后退”按钮就失效了,带来了另外一种糟糕的用户体验. 解决方案如下: 方案一:使用window. Onhashchange 事件 如下面Html片 ...

  5. WebApp 中用 hashchange 做路由解析

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 简单的基于hash和hashchange的前端路由

    hash定义 hash这个玩意是地址栏上#及后面部分,代表网页中的一个位置,#后面部分为位置标识符.页面打开后,会自动滚动到指定位置处. 位置标识符 ,一是使用锚点,比如<a name=&quo ...

  7. 基于hashchange导航管理

    想在五一放假的时候写出来,由于放假有点兴奋,心早就跑了,不废话了. 说一下基于hashchange导航管理: 浏览器的历史记录导航是用户非常常用的功能,除了点击前进后退按钮外,Window上的hist ...

  8. hashChange & url change & QRCode & canvas to image

    hashChange & url change & QRCode & canvas to image "use strict"; /** * * @auth ...

  9. js中hash、hashchange事件

    1.hash即URL中"#"字符后面的部分. ①使用浏览器访问网页时,如果网页URL中带有hash,页面就会定位到id(或name)与hash值一样的元素的位置: ②hash还有另 ...

随机推荐

  1. chrome下如何显示打开网页的IP地址

    Website IP:装上之后在网页右下角能够显示当前访问网页的IP地址,这个对定位哪台前端机是有问题的,特别有帮助.

  2. Vsftp配置都没有问题 连接不上 530 Login incorrect 解决方法

    客户端输入正确的用户名和密码之后,却一直显示:530 Login incorrectLogin Failed后来发现在etc下面有个pam.d文件夹进去打开vsftpd这个文件, 发现里面对之前的用户 ...

  3. Android编程之SparseArray<E>详解

    最近编程时,发现一个针对HashMap<Integer, E>的一个提示: 翻译过来就是:用SparseArray<E>来代替会有更好性能.那我们就来看看源码中SparseAr ...

  4. jQuery常用及基础知识总结(一)

    Attribute: $(”p”).addClass(css中定义的样式类型); 给某个元素添加样式$(”img”).attr({src:”test.jpg”,alt:”test Image”}); ...

  5. 1381: Munching(BFS)

    Description Bessie loves her grass and loves to hurry to the barn for her evening milking session. S ...

  6. Mac系统下安装Tomcat,以及终端出现No such file or directory的错误提示解决方案

    Tomcat,作为一个免费的服务器口碑实在太好,本想安装一个研究研究,无奈电脑是mac系统,在网上搜了一些安装方法总是出错,直到遇到了这篇博客,http://www.cnblogs.com/qingy ...

  7. docker 容器日志集中 ELK + filebeat

    docker 容器日志集中 ELK ELK 基于 ovr 网络下 docker-compose.yaml version: '2' networks: network-test: external: ...

  8. linux nfs文件夹、文件共享

    ◆一.概念 NFS是网络文件系统(Network File System)的简称,是分布式计算机系统的一个组成部分,可实现在异构网络上共享和装配远程文件系统. NFS由SUN公司开发,目前已成为文件服 ...

  9. nginx的RTMP协议服务器

    nginx的RTMP协议服务器 by ahuner 通过以下的配置,可以使nginx接收RTMP流,并在web上播放实时视频. 1.openssl安装 nginx需要http_ssl_module模块 ...

  10. tomcat webdav

    <servlet> <servlet-name>webdav</servlet-name> <servlet-class>org.apache.cata ...