监控 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 相关文章推荐
Javascript 同时提交多个Web表单的方法
Feb 19 Javascript
javaScript 利用闭包模拟对象的私有属性
Dec 29 Javascript
javascript 文件的同步加载与异步加载实现原理
Dec 13 Javascript
tangram框架响应式加载图片方法
Nov 21 Javascript
js轮播图无缝滚动效果
Jun 17 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
Mar 01 Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 Javascript
小程序关于请求同步的总结
May 05 Javascript
Vue请求java服务端并返回数据代码实例
Nov 28 Javascript
JS实现音量控制拖动
Jan 15 Javascript
JavaScript实现随机点名程序
Mar 25 Javascript
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
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 UBB 解析实现代码
2011/11/27 PHP
PHP的error_reporting错误级别变量对照表
2014/07/08 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
一个实用的php验证码类
2017/07/06 PHP
PHP实现的装箱算法示例
2018/06/23 PHP
javascript new 需不需要继续使用
2009/07/02 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
jQuery实现获取元素索引值index的方法
2016/09/18 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
2017/03/29 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
vue小白入门教程
2018/04/02 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
2018/04/09 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
深入分析JavaScript 事件循环(Event Loop)
2020/06/19 Javascript
使用Python的Twisted框架编写非阻塞程序的代码示例
2016/05/25 Python
python如何将图片转换为字符图片
2020/08/19 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
python中比较两个列表的实例方法
2019/07/04 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
python+selenium+chromedriver实现爬虫示例代码
2020/04/10 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
亚马逊印度站:Amazon.in
2017/10/15 全球购物
自荐信格式技巧有哪些呢
2013/11/19 职场文书
房地产财务部员工岗位职责
2014/03/12 职场文书
名人演讲稿范文
2014/09/16 职场文书
毕业实习计划书
2015/01/16 职场文书
企业战略合作意向书
2015/05/08 职场文书
中秋节晚会开场白
2015/05/29 职场文书
2015年秋学期师德师风建设工作总结
2015/10/23 职场文书
《月球之谜》教学反思
2016/02/20 职场文书