hashchange
<!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的更多相关文章
- 理解浏览器历史记录(2)-hashchange、pushState
本文也是一篇基础文章.继上文之后,本打算去研究pushState,偶然在一些信息中发现了锚点变化对浏览器的历史记录也会影响,同时锚点的变化跟pushState也有一些关联.所以就花了点时间,把这两个东 ...
- hashchange事件的认识
写过路由的同学都知道其原理是通过URL的改变,由导航信息来决定页面信息...表述的好像有点不准确 这么说吧,只要URL参数列表只要变化就会调用hashchange事件,此时event对象包括oldUR ...
- jQuery不支持hashchange事件?
$(window) .bind( 'hashchange', onHashchange ) .trigger( 'hashchange' ); jQuery版本是1.9.1的,去源码里没找到hashc ...
- AJAX保留浏览历史的解决方案——hashchange()
在ajax请求中,不能更新地址栏,地址栏上的“前进”和“后退”按钮就失效了,带来了另外一种糟糕的用户体验. 解决方案如下: 方案一:使用window. Onhashchange 事件 如下面Html片 ...
- WebApp 中用 hashchange 做路由解析
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 简单的基于hash和hashchange的前端路由
hash定义 hash这个玩意是地址栏上#及后面部分,代表网页中的一个位置,#后面部分为位置标识符.页面打开后,会自动滚动到指定位置处. 位置标识符 ,一是使用锚点,比如<a name=&quo ...
- 基于hashchange导航管理
想在五一放假的时候写出来,由于放假有点兴奋,心早就跑了,不废话了. 说一下基于hashchange导航管理: 浏览器的历史记录导航是用户非常常用的功能,除了点击前进后退按钮外,Window上的hist ...
- hashChange & url change & QRCode & canvas to image
hashChange & url change & QRCode & canvas to image "use strict"; /** * * @auth ...
- js中hash、hashchange事件
1.hash即URL中"#"字符后面的部分. ①使用浏览器访问网页时,如果网页URL中带有hash,页面就会定位到id(或name)与hash值一样的元素的位置: ②hash还有另 ...
随机推荐
- JavaScript window.setTimeout() 的详细用法
setTimeout (表达式,延时时间)setTimeout(表达式,交互时间) 延时时间/交互时间是以豪秒为单位的(1000ms=1s) setTimeout 在执行时,是在载入后延迟指定时间后, ...
- JSP内置对象--session对象(getId(),getCreationTime(),getLastAccessedTime(),isNew(),invalidate(),setAttribute(),getAttribute())
session对象是javax.servlet.http.HttpSession接口的实例,但是不像HttpServletRequest或HttpServletResponse一样,有父接口,他没有父 ...
- MyEclipse9,MyEclipse10 安装ADT
Eclipse安装ADT 时步骤是开 Eclipse IDE,进入菜单中的 "Help" -> "Install New Software" ,点击Add ...
- 饥饿的牛(hunger)
饥饿的牛(hunger) 题目描述 牛在饲料槽前排好了队.饲料槽依次用1到n(1≤n≤2000)编号.每天晚上,一头幸运的牛根据约翰的规则,吃其中一些槽里的饲料.约翰提供B个区间的清单.一个区间是一对 ...
- android脚步---APP引导页添加
package com.leadcore.uudatoutie; import java.util.ArrayList; import com.leadcore.uudatoutie.R; impor ...
- HDU 1789 Doing Homework again(贪心)
在我上一篇说到的,就是这个,贪心的做法,对比一下就能发现,另一个的扣分会累加而且最后一定是把所有的作业都做了,而这个扣分是一次性的,所以应该是舍弃扣分小的,所以结构体排序后,往前选择一个损失最小的方案 ...
- logo集锦
收集一个酷酷的技术公司的logo,一方面学习其中的美,另一方面打算用代码的画出这些logo算做致敬.感谢他们改变了我们的世界. 三星 苹果 戴尔 谷歌 IBM intel 惠普
- 上传数据插件 Easy Populate 遇到问题 ?langer=remove
批量上传,出现如下错误提示: ADD NEW PRODUCT FAILED! – Model: no200 – SQL error. Check Easy Populate error log in ...
- UML类图基本画法
转自:http://www.cnblogs.com/import-this/p/5330501.html 1. 类 类包括属性方法 下图的生命就是属性 代谢就是方法 2.基本关系 a.泛化(Gener ...
- ecma6的学习好网站
http://www.nodeclass.com/api/ECMAScript6.html#function http://es6.ruanyifeng.com/#docs/destructuring ...