window.onresize 事件笔记



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