监控 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常量定义进行详细介绍，具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
下面小编就为大家分享一篇js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)，具有很的参考价值，希望对大家有所帮助2017-12-12
本文主要给大家分享的是一则javascript实现的自定义右键行为的小技巧，非常的简单实用，有相同需求的小伙伴可以参考下。2015-03-03
今天小编就为大家分享一篇Layui表格行工具事件与数据回填方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了javascript实现的图片预览功能,结合实例形式分析了javascript针对图片预览相关功能实现技巧与注意事项,需要的朋友可以参考下2017-03-03
脚本合并可以有效提升javascript性能，下面有个不错的示例，大家可以参考下2014-02-02
这篇文章主要介绍了在weex中愉快的使用scss的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
今天小编就为大家分享一篇layui使用button按钮 点击出现弹层 弹层中加载表单的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要为大家详细介绍了JavaScript实现淘宝网图片的局部放大功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
本篇文章主要介绍如何实现Web页面内容的打印预览和保存操作的相关知识，感兴趣的朋友一起学习吧2016-05-05
最新评论