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.頁面尺寸變更事件，注意要分為尺寸增大和尺寸變小兩個方向考慮。