兼容旧版IE的URL Fragment变化监听方案

作者:木棉时间:2026-10-24 20:25:02浏览:172

本文介绍如何在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中常用的技巧,用于模拟事件触发的效果。

作者最新文章