监控 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 相关文章推荐
利用Ext Js生成动态树实例代码
Sep 08 Javascript
javascript制作的简单注册模块表单验证
Apr 13 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
Jul 12 Javascript
浅析Angular2子模块以及异步加载
Apr 24 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 Javascript
js数组去重的N种方法(小结)
Jun 07 Javascript
JavaScript实现学生在线做题计时器功能
Dec 05 Javascript
vuejs简单验证码功能完整示例
Jan 08 Javascript
vue-cli项目使用mock数据的方法(借助express)
Apr 15 Javascript
element-ui封装一个Table模板组件的示例
Jan 04 Javascript
JS实现数组去重的11种方法总结
Apr 04 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
是否存在第一台收音机的说法
2021/03/01 无线电
奉献出一个封装的curl函数 便于调用(抓数据专用)
2013/07/22 PHP
Smarty环境配置与使用入门教程
2016/05/11 PHP
PHP微信开发之查询城市天气
2016/06/23 PHP
PHP常用函数总结(180多个)
2016/12/25 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
2019/09/20 Javascript
vue动态设置路由权限的主要思路
2021/01/13 Vue.js
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
python基于右递归解决八皇后问题的方法
2015/05/25 Python
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
Django 中使用流响应处理视频的方法
2018/07/20 Python
Python 字符串换行的多种方式
2018/09/06 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
python 实现手机自动拨打电话的方法(通话压力测试)
2019/08/08 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
如何基于python对接钉钉并获取access_token
2020/04/21 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
Python try except else使用详解
2021/01/12 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
pycharm配置安装autopep8自动规范代码的实现
2021/03/02 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
应届毕业生自我鉴定范文
2013/12/27 职场文书
小学优秀班干部事迹材料
2014/05/25 职场文书
孝敬父母的活动方案
2014/08/31 职场文书
房产公证委托书范本
2014/09/20 职场文书
金砖之国观后感
2015/06/11 职场文书
MySQL 原理优化之Group By的优化技巧
2022/08/14 MySQL