zoukankan      html  css  js  c++  java
  • 监控 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 中间常用的技巧,模拟一个事件的作用。

  • 相关阅读:
    自我介绍
    目前流行的源程序版本管理软件和项目管理软件的优缺点
    四月是你的谎言
    软件分析(Mobile Apps )--百词斩
    程序扩展
    超级无敌小学四则运算题目程序
    4组 团队展示
    2020面向对象设计与构造 第四单元 & 课程 博客总结
    2020面向对象设计与构造 第三单元 博客总结
    2020面向对象设计与构造 第二单元 博客总结
  • 原文地址:https://www.cnblogs.com/niniwzw/p/1715273.html
Copyright © 2011-2022 走看看