zoukankan      html  css  js  c++  java
  • js 监听URL的hash变化

    项目中使用AntdUI组件+react  里面使用了menu组件管理目录结构,不同目录组件页面之中有点击按钮进行不同目录的跳转,因为是各种组件的关系,点击各组件后准确跳转到目标页面没有问题,但是左侧目录结构不能进行有效的收缩和展开的动作,故使用js来监听URL的hash变化的方式进行接下来的逻辑行为

    原理:监视hash的变化 onhashchange事件

    兼容:

       Gecko 1.9.2 (Firefox 3.6/Thunderbird 3.1/Fennec 1.0)

       IE 8

       WebKit 528+ (Safari/Google Chrome)

       Opera 10.70

    备用方法:定时器(频繁的定时器,隐患很大)

    秉承不应基于浏览器检测,而应基于对象和方法检测的 原则,可用 if(‘onhashchange’ in window) { } 检测浏览器是否支持onhashchange。这里不能用 typeof window.onhashchange === ‘undefined’ 来检测,因为很多支持onhashchange的浏览器下,其初始值就是undefined。

    需要注意的是,在IE8以ie7的模式运行时,window下存在onhashchange这个方法,但是永远不会触发这个事件,因此需要先检测IE的document.documentMode

    综上所述,采取比较完善方式的代码片段:

    if( ("onhashchange" in window) && ((typeof document.documentMode==="undefined") || document.documentMode==8)) {
        // 浏览器支持onhashchange事件
        window.onhashchange = hashChangeFire;  // TODO,对应新的hash执行的操作函数
    } else {
        // 不支持则用定时器检测的办法
        setInterval(function() {
            var ischanged = isHashChanged();  // TODO,检测hash值或其中某一段是否更改的函数
            if(ischanged) {
                hashChangeFire();  // TODO,对应新的hash执行的操作函数
            }
        }, 150);
    }
    function
    hashChangeFire(){ alert("URL产生了变化") } 
  • 相关阅读:
    234. Palindrome Linked List
    Remove duplicates
    Unsorted, maximum ==> sorted
    Find one unique integer
    TwoSum
    13. Roman to Integer
    38. Count and Say
    543. Diameter of Binary Tree
    LuoguP1131 [ZJOI2007]时态同步 (树形DP,贪心)
    Luogu3177 [HAOI2015]树上染色 (树形DP)
  • 原文地址:https://www.cnblogs.com/web-chuan/p/9777740.html
Copyright © 2011-2022 走看看