当前位置:首页 > Windows程序 > 正文

window.onresize 事件笔记

2021-05-24 Windows程序

1.浏览器尺寸变化响应事件 :

window.onresize = function(){....}

这里需要注意的是,onresize响应事件处理中,获取到的页面尺寸参数是变更后的参数。
// 获取到的是变更后的页面宽度 var currentWidth = document.body.clientWidth;


 
如果需要使用到变更之前的参数,,需要建一个全局变量保存之前的参数(并且记得在onresize事件中刷新这个全局变量保存新的参数值)。


2.谷歌浏览器中  window.onresize 事件默认会执行两次(偶尔也会只执行一次,网上大部分说法认为这是Chrome的bug)。
  解决方法:一般来说推荐新建一个标志位 延时复位控制它不让它自己执行第二次,代码如下:

var firstOnResizeFire = true;//谷歌浏览器onresize事件会执行2次,这里加个标志位控制 window.onresize = function() { if (firstOnResizeFire) { NfLayout.tabScrollerMenuAdjust(homePageWidth); firstOnResizeFire = false; //0.5秒之后将标志位重置(Chrome的window.onresize默认执行两次) setTimeout(function() { firstOnResizeFire = true; }, 500); } homePageWidth = document.body.clientWidth; //重新保存一下新宽度 }

3.页面尺寸变更事件,注意要分为尺寸增大和尺寸变小两个方向考虑。

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/70316.html