监控 url fragment 的变化

监控 url fragment 的变化

     url 里面的 #后面的部分  可以实现无刷新的改变url 的值。这个特点非常有用。比如视频网站土豆中的豆单，你进入视频列表以后，点击播放某个视频。

当然，页面最好不要刷新，但是，拷贝一下浏览器的链接，又希望是下次能定位到你播发的那个视频。方法很简单，改变一下 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 中间常用的技巧，模拟一个事件的作用。

 

posted @ 2010-04-19 11:59 暮夏 阅读( ...) 评论( ...) 编辑 收藏