监控 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 防止表单重复提交代码
Jan 21 Javascript
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
JavaScript获取页面中超链接数量的方法
Nov 09 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
Vue.js 和 MVVM 的注意事项
Nov 07 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
Nov 08 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
微信小程序实现锚点定位楼层跳跃的实例
May 18 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
May 26 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
Aug 18 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
Sep 28 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 @ at 记号的作用示例介绍
2014/10/10 PHP
PHP生成plist数据的方法
2015/06/16 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
2014/04/25 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
通过点击jqgrid表格弹出需要的表格数据
2015/12/02 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
JS & JQuery 动态添加 select option
2016/06/08 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
2019/01/23 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
React实现全选功能
2020/08/25 Javascript
基于Python实现一个简单的银行转账操作
2016/03/06 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
pandas 数据类型转换的实现
2020/12/29 Python
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
爱游人:Travelliker
2017/09/05 全球购物
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
动物科学专业毕业生的自我评价
2013/11/29 职场文书
《植物妈妈有办法》教学反思
2014/02/25 职场文书
经贸专业毕业生求职信
2014/03/23 职场文书
2015年基层党组织公开承诺书
2015/01/21 职场文书
活动主持人开场白
2015/05/28 职场文书
小学生教师节广播稿
2015/08/19 职场文书
Mysql 设置boolean类型的操作
2021/06/04 MySQL