监控 url fragment变化的js代码
更新时间：2010年04月19日 21:18:49 作者：
url 里面的 #后面的部分 可以实现无刷新的改变url 的值。这个特点非常有用。比如视频网站土豆中的豆单，你进入视频列表以后，点击播放某个视频。
当然，页面最好不要刷新，但是，拷贝一下浏览器的链接，又希望是下次能定位到你播发的那个视频。方法很简单，改变一下 url 的 fragment 就可以了。
监听fragment 的变化是这类编程的核心。在主流的浏览器(IE firefox)里面 都有一个 onhashchange 的事件监听 fragment 的变化。
但是，他们的行为有些差异。在IE8 以前的 IE版本里面，当 window.location 对象迅速变化的情况下，onhashchange 不会触发，非常奇怪的bug。
下面我写的 onhashchange 事件 没有浏览器的差异。并且加入了一个功能，页面初始化的时候，如果 url 中 有 fragment ，也触发一下
onhashchange 事件。
function addFragmentChangeEvent(callback)
{
var source = document.URL;
var url = source.split("#")[0];
if (window.location.hash)
{
var base_hash = "#____base____hash____";//改变hash，使得页面初始化的时候触发一下事件函数。
window.location = url + base_hash;
}
var prevHash = window.location.hash;
window.setInterval(
function()
{
if (window.location.hash != prevHash)
{
prevHash = window.location.hash;
callback(prevHash);
}
}, 100);
if (window.location.hash)
{
window.location = source;
}
}
其实这个技巧是js 中间常用的技巧，模拟一个事件的作用。
监听fragment 的变化是这类编程的核心。在主流的浏览器(IE firefox)里面 都有一个 onhashchange 的事件监听 fragment 的变化。
但是，他们的行为有些差异。在IE8 以前的 IE版本里面，当 window.location 对象迅速变化的情况下，onhashchange 不会触发，非常奇怪的bug。
下面我写的 onhashchange 事件 没有浏览器的差异。并且加入了一个功能，页面初始化的时候，如果 url 中 有 fragment ，也触发一下
onhashchange 事件。
复制代码 代码如下:
function addFragmentChangeEvent(callback)
{
var source = document.URL;
var url = source.split("#")[0];
if (window.location.hash)
{
var base_hash = "#____base____hash____";//改变hash，使得页面初始化的时候触发一下事件函数。
window.location = url + base_hash;
}
var prevHash = window.location.hash;
window.setInterval(
function()
{
if (window.location.hash != prevHash)
{
prevHash = window.location.hash;
callback(prevHash);
}
}, 100);
if (window.location.hash)
{
window.location = source;
}
}
其实这个技巧是js 中间常用的技巧，模拟一个事件的作用。
相关文章
这篇文章主要介绍了JavaScript暂停和继续定时器的方法的相关资料,非常不错，需要的朋友可以参考下2016-07-07
如何实现textarea里的不同文本显示不同颜色呢？控制textarea的style设置Textarea以及把文本放到标记里都不会起作用，下面有个不错的解决方法，感兴趣的朋友可以了解下2014-01-01
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
JavaScript对象与DOM对象进行绑定会遇到一个问题：如果被绑定的对象的方法中包含this关键字，当事件被触发时this指向的却是DOM对象，而不是之前的JS对象。2011-09-09
这篇文章主要介绍了JavaScript数组对象实现增加一个返回随机元素的方法,涉及javascript针对数组及随机数的相关操作技巧,需要的朋友可以参考下2015-07-07
行为验证码通过用户的操作来完成验证,常见的行为验证码有拖动式和点触式,下面这篇文章主要给大家介绍了关于js前端实现登录拼图验证功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了JavaScript中执行上下文和执行栈，执行上下文是评估和执行JavaScript代码的环境的抽象概念，更多相关介绍，感兴趣的朋友可以参考一下2022-09-09
这篇文章主要介绍了javascript动画算法,实例分析了javascript实现动画效果的实现及使用技巧,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了javascript结合CSS实现苹果开关按钮特效的方法以及全部代码，效果非常不错，兼容性也很好，有需要的小伙伴自己参考下2015-04-04
在Twitter上的一些有趣的讨论中, 我发现人们对于Web应用和站点对javascript的依赖普遍存在一种疑惑. 这种疑惑一直都存在, 而对我而言, 这个问题随着浏览技术的飞跃发展而集中爆发了2013-10-10
这篇文章主要介绍了有关JavaScript Promises异步问题详解的相关资料,需要的朋友可以参考下2015-11-11
最新评论