兼容旧版IE的URL Fragment变化监听方案
本文介绍如何在JavaScript中监听URL Fragment(Hash)的变化,重点解决IE8及以下版本中onhashchange事件不触发的问题。通过模拟hash变更结合setInterval轮询的方式,实现跨浏览器兼容的Hash监听功能,并支持页面初始化时自动触发回调。
URL Fragment监听的需求与背景
虽然页面刷新并非必要,但为了在用户复制浏览器链接后仍能定位到具体的视频播放位置,一种简便的方法是利用URL的Fragment部分。
此类开发的核心在于监听Fragment的变化。主流浏览器(如IE和Firefox)均提供了onhashchange事件来响应Fragment的改变。
然而,不同浏览器的行为存在差异。在IE8之前的IE版本中,若window.location对象发生快速连续变化,onhashchange事件将不会触发,这是一个较为奇怪的Bug。
兼容旧版IE的监听实现方案
下文提供的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;
}
} 这实际上是JavaScript中常用的技巧,用于模拟事件触发的效果。
JavaScript怎么准确判断数据类型:typeof、instanceof与Object.prototype.toString
2026-11-05 17:09:21
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么?
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
D3.js 与 ECharts 选型对比:灵活性 vs 开发效率
2026-11-05 09:45:01
