监控 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 相关文章推荐
JavaScript入门学习书籍推荐
Jun 12 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
Jan 13 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 Javascript
详解javascript中原始数据类型Null和Undefined
Dec 17 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 Javascript
终于实现了!精彩的jquery弹幕效果
Jul 18 Javascript
js 获取元素所有兄弟节点的实现方法
Sep 06 Javascript
jsTree使用记录实例
Dec 01 Javascript
jquery删除数组中重复元素
Dec 05 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
关于JavaScript 中 if包含逗号表达式
Nov 27 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的一个简单加密解密代码
2014/01/14 PHP
在php中设置session用memcache来存储的方法总结
2016/01/14 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
2016/05/28 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
Laravel 5.5 异常处理 & 错误日志的解决
2019/10/17 PHP
ext for eclipse插件安装方法
2008/04/27 Javascript
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
JQuery判断子iframe何时加载完成解决方案
2013/08/20 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
浅谈Javascript实现继承的方法
2015/07/06 Javascript
javascript实现将文件保存到本地方法汇总
2015/07/26 Javascript
11种ASP连接数据库的方法
2015/09/18 Javascript
轻松实现js图片预览功能
2016/01/18 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
angular.js实现购物车功能
2017/10/23 Javascript
vue项目实战总结篇
2018/02/11 Javascript
浅谈Angular单元测试总结
2019/03/22 Javascript
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
你应该知道的python列表去重方法
2017/01/17 Python
利用python3随机生成中文字符的实现方法
2017/11/24 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
机械工程师求职自我评价
2013/09/23 职场文书
大学新生军训方案
2014/05/03 职场文书
企业晚会策划方案
2014/05/29 职场文书
职位证明模板
2015/06/23 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书
浅谈Java父子类加载顺序
2021/08/04 Java/Android