监控 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 相关文章推荐
JQuery插件Style定制化方法的分析与比较
May 03 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
Dec 03 Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 Javascript
JS字符串的切分用法实例
Feb 22 Javascript
JavaScript实现九九乘法表的简单实例
Jun 07 Javascript
Bootstrap Validator 表单验证
Jul 25 Javascript
javascript 将共享属性迁移到原型中去的实现方法
Aug 31 Javascript
vue中用H5实现文件上传的方法实例代码
May 27 Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
解决JavaScript layui 下拉框不显示的问题
Aug 14 Javascript
vue解决跨域问题(推荐)
Nov 10 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
3种平台下安装php4经验点滴
2006/10/09 PHP
php中获取主机名、协议及IP地址的方法
2014/11/18 PHP
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
2013/02/04 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
javascript事件委托的用法及其好处简析
2016/04/04 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
Nodejs 发送Post请求功能(发短信验证码例子)
2017/02/09 NodeJs
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
理理Vue细节(推荐)
2019/04/16 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
JavaScript this关键字的深入详解
2021/01/14 Javascript
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
python中的随机函数小结
2018/01/27 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
用python3读取python2的pickle数据方式
2019/12/25 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
python和php学习哪个更有发展
2020/06/17 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
澳大利亚在线划船、露营和钓鱼商店:BCF Australia
2020/03/22 全球购物
本科毕业自我鉴定
2014/03/20 职场文书
学生会竞聘书范文
2014/03/31 职场文书
《赶海》教学反思
2014/04/20 职场文书
融资合作协议书范本
2014/10/17 职场文书
孙振耀退休感言
2015/08/01 职场文书
Nginx的反向代理实例详解
2021/03/31 Servers
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js
Windows server 2012搭建FTP服务器
2022/04/29 Servers
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers