window.onresize笔记

来源：互联网发布：warframe 检测网络编辑：程序博客网时间：2024/05/23 01:11

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.页面尺寸变更事件，注意要分为尺寸增大和尺寸变小两个方向考虑。

0 0