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产生了变化") }

js 监听URL地址变化相关推荐

html5中检测网络状态的方法,前端js监听浏览器网络变化
首先,为什么要让前端判断用户的网络状态呢--为了更好的用户体验. 其次,前端能否判断网络状态?有哪些方法? 1,可以做到渐进式判断,不能做到绝对准确. 2,使用的是navigator.onLine或n ...
如何监听URL的变化？
文章转自: https://juejin.im/post/5c2708cd6fb9a049f06a5744 如何监听URL的变化? 单页应用的原理从早起的根据url的hash变化,到根据H5的hist ...
使用Node.JS监听文件夹变化
使用Node.JS监听文件夹改变有许多应用场合,比如: 构建自动编绎工具当源文件改变时,自动运行build过程,比如当你写CoffeeScript文件或SASS CSS文件时,保存之后可即时生成对应 ...
js 监听浏览器窗口大小变化
监听浏览器大小变化 window.addEventListener('resize', function() {// 变化后需要做的事console.log("bianhuale====== ...
js监听select值变化_网络编程——C++实现socket通信(TCP)高并发之select模式
相关函数: 服务端: socket() bind() listen() FD_ZERO()等辅助函数 select() 高并发select模式 accept() read() 或 recv()等 wr ...
js监听页面元素变化window.MutationObserver
相信前端开发同学都熟悉各种各样的监听事件,比如元素点击事件onClick,鼠标事件onMouseDown.onMouseHover,键盘按键onKeyDown,浏览器窗口改变事件onResize等等. ...
js监听div高度变化
//这个方法封装了实时监听div的大小变化(最开始我是作用于解决echarts图表的最外层父元素的宽度不能随着拉动浏览器窗口大小而实时改变)(function($, h, c) {var a = $( ...
监听url地址栏变化
使用window.onhashchange方法 window.onhashchange = function (e) {console.log(e);console.log(e.newURL);con ...
vue监听url地址栏参数变化
问题:在开发过程中我们有可能会遇到一个问题,就是在一个vue项目中引入了一个组件,点击这个组件跳转的还是当前的页面,只是传递的参数发生了变化,这个时候我们传递的参数就不能正常的赋值了,这是因为页面没有 ...

js 监听URL地址变化

js 监听URL的hash变化

js 监听URL地址变化相关推荐

最新文章

热门文章