监控 url fragment变化的js代码


Posted in Javascript onApril 19, 2010

当然,页面最好不要刷新,但是,拷贝一下浏览器的链接,又希望是下次能定位到你播发的那个视频。方法很简单,改变一下 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 中间常用的技巧,模拟一个事件的作用。
Javascript 相关文章推荐
兼容FireFox 的 js 日历 支持时间的获取
Mar 04 Javascript
javascript prototype 原型链
Mar 12 Javascript
jquery lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
Feb 27 Javascript
js密码强度校验
Nov 10 Javascript
JS日程管理插件FullCalendar中文说明文档
Feb 06 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
简单说说如何使用vue-router插件的方法
Apr 08 Javascript
vue配置nprogress实现页面顶部进度条
Sep 21 Javascript
vue-resource:jsonp请求百度搜索的接口示例
Nov 09 Javascript
微信小程序vant弹窗组件的实现方式
Feb 21 Javascript
vuex(vue状态管理)的特殊应用案例分享
Mar 03 Javascript
jquery获取input表单值的代码
Apr 19 #Javascript
编写高性能的JavaScript 脚本的加载与执行
Apr 19 #Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 #Javascript
jquery 新手学习常见问题解决方法
Apr 18 #Javascript
javascript 设计模式之单体模式 面向对象学习基础
Apr 18 #Javascript
js 获取子节点函数 (兼容FF与IE)
Apr 18 #Javascript
几个比较实用的JavaScript 测试及效验工具
Apr 18 #Javascript
You might like
php抓取https的内容的代码
2010/04/06 PHP
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
PHP基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
php中session退出登陆问题
2014/02/27 PHP
怎样搭建PHP开发环境
2015/07/28 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
js模仿hover的具体实现代码
2013/12/30 Javascript
浅谈jquery中delegate()与live()
2015/06/22 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
Vuejs实现购物车功能
2017/11/05 Javascript
javascript实现最长公共子序列实例代码
2018/02/05 Javascript
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
python实现dict版图遍历示例
2014/02/19 Python
Python开发的HTTP库requests详解
2017/08/29 Python
TensorFlow实现创建分类器
2018/02/06 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
python实现AES加密和解密
2019/03/27 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
python 写一个文件分发小程序
2020/12/05 Python
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
abstract 可以和 virtual 一起使用吗?可以和 override 一起使用吗?
2012/10/15 面试题
酒店保洁主管岗位职责
2013/11/28 职场文书
物流仓管员工作职责
2014/01/06 职场文书
设计师个人求职信范文
2014/02/02 职场文书
高中军训感言200字
2014/02/23 职场文书
教师党员一句话承诺
2014/03/28 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书
Tomcat弱口令复现及利用
2022/05/06 Servers