监控 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 获取函数形参个数
Jul 31 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
Actionscript与javascript交互实例程序(修改)
Sep 22 Javascript
HTML页面定时跳转方法解析(2种任选)
Dec 22 Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
js实现图片上传预览原理分析
Jul 13 Javascript
通过源码分析Vue的双向数据绑定详解
Sep 24 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
Sep 28 Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
Feb 23 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
完美解决通过IP地址访问VUE项目的问题
Jul 18 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下一个阿拉伯数字转中文数字的函数
2007/07/16 PHP
分享php分页的功能模块
2015/06/16 PHP
php打乱数组二维数组多维数组的简单实例
2016/06/17 PHP
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
node.js中的fs.open方法使用说明
2014/12/17 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
js鼠标点击图片实现随机变换图片的方法
2015/02/16 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
2016/04/18 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
浅析Ajax语法
2016/12/05 Javascript
js常用DOM方法详解
2017/02/04 Javascript
JS表格组件神器bootstrap table使用指南详解
2017/04/12 Javascript
vue.js父组件使用外部对象的方法示例
2017/04/25 Javascript
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
js实现盒子拖拽动画效果
2020/08/09 Javascript
对Python新手编程过程中如何规避一些常见问题的建议
2015/04/01 Python
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
django多文件上传,form提交,多对多外键保存的实例
2019/08/06 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
实习生个人的自我评价
2013/12/08 职场文书
信访工作者先进事迹
2014/01/17 职场文书
《自选商场》教学反思
2014/02/14 职场文书
经理秘书求职自荐信范文
2014/03/23 职场文书
党课培训心得体会
2014/09/02 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
五年级学生评语大全
2014/12/26 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS
基于Python实现股票收益率分析
2022/04/02 Python