监控 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的属性选择符和自定义选择符使用方法(二)
Apr 07 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
jQuery Masonry瀑布流插件使用详解
Nov 17 Javascript
jquery任意位置浮动固定层插件用法实例
May 29 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
vue.js 实现输入框动态添加功能
Jun 25 Javascript
JS在if中的强制类型转换方式
Jul 15 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 Javascript
vue+vant实现商品列表批量倒计时功能
Jan 13 Javascript
深入了解JS之作用域和闭包
Jun 16 Javascript
JavaScript实现页面高亮操作提示和蒙板
Jan 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
php面向对象全攻略 (八)重载新的方法
2009/09/30 PHP
php标签云的实现代码
2012/10/10 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
Smarty日期时间操作方法示例
2016/11/15 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
使用JavaScript switch case 另类写法
2010/03/14 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
jQuery最佳实践完整篇
2011/08/20 Javascript
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
jQuery中closest()函数用法实例
2015/01/07 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
字符串反转_JavaScript
2016/04/28 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
2016/05/04 Javascript
vue从使用到源码实现教程详解
2016/09/19 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
使用classList来实现两个按钮样式的切换方法
2018/01/24 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
一篇文章快速了解Python的GIL
2018/01/12 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
Python实现的逻辑回归算法示例【附测试csv文件下载】
2018/12/28 Python
Python基于execjs运行js过程解析
2020/11/27 Python
在css3中background-clip属性与background-origin属性的用法介绍
2012/11/13 HTML / CSS
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
创先争优活动党员公开承诺书
2014/08/29 职场文书
开会通知
2015/04/20 职场文书
历史博物馆观后感
2015/06/05 职场文书
创业计划书之宠物店
2019/09/19 职场文书
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python
vue elementUI表格控制对应列
2022/04/13 Vue.js
Python绘制散乱的点构成的图的方法
2022/04/21 Python