监控 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 顺便学习下CSS选择器 奇偶匹配nth-child(even)
May 24 Javascript
js Object2String方便查看js对象内容
Nov 24 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
跨域请求的完美解决方法(JSONP, CORS)
Jun 12 Javascript
JS实现的表格行上下移动操作示例
Aug 03 Javascript
canvas绘制环形进度条
Feb 23 Javascript
详解使用vue-admin-template的优化历程
May 20 Javascript
详解mpvue scroll-view自动回弹bug解决方案
Oct 01 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
OpenLayers实现图层切换控件
Sep 25 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 开发环境配置(Zend Studio)
2010/04/28 PHP
php cookie名使用点号(句号)会被转换
2014/10/23 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
微信小程序 生成携带参数的二维码
2019/10/23 Javascript
Vue-cli项目部署到Nginx服务器的方法
2019/11/01 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
python文件操作之目录遍历实例分析
2015/05/20 Python
速记Python布尔值
2017/11/09 Python
Python入门必须知道的11个知识点
2018/03/21 Python
python装饰器深入学习
2018/04/06 Python
python实现趣味图片字符化
2019/04/30 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
pytorch中的inference使用实例
2020/02/20 Python
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
2016/04/26 HTML / CSS
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
是什么让J2EE适合用来开发多层的分布式的应用
2015/01/16 面试题
党员干部一句话承诺
2014/05/30 职场文书
国家税务局领导班子对照检查材料思想汇报
2014/10/04 职场文书
公司辞职信模板
2015/05/13 职场文书