1 // 開始這樣寫，不執行
2 window.onresize = function() {
3 console.log('窗口發生變化')
4 }
5
6
7 // 改成window監聽事件
8 window.addEventListener('resize', function() {
9 console.log('窗口發生變化')
10 }）
onresize的定義方式
一、直接在html中定義
如<body onresize="doResize()"/>
二、直接給onresize賦值
可以給window和body的onresize賦值
如window.onresize=function(){},document.body.onresize=function(){}
三、使用事件監聽
只對window有作用
如window.addEventListener("resize",fn);
說明：
1、直接給onresize賦值會覆蓋在html中定義。
2、直接給onresize賦值，window,body只有一個起作用，后定義的會覆蓋先定義的
3、事件監聽只對window有效，可以其它方式同時觸發。
1 1.瀏覽器尺寸變化響應事件 ：
2
3 Js代碼 收藏代碼
4 window.onresize = function(){....}
5
6
7 獲取變更后參數：
8
9
10
11 Js代碼 收藏代碼
12 // 獲取到的是變更后的頁面寬度
13 var currentWidth = document.body.clientWidth;
14 這里需要注意的是，onresize響應事件處理中，因為已經刷新頁面，所以獲取到的頁面尺寸參數是變更后的參數。
15
16
17
18 如果需要使用到變更之前的參數，需要建一個全局變量保存之前的參數（並且記得在onresize事件中刷新這個全局變量保存新的參數值）。
1 2.谷歌瀏覽器中 window.onresize 事件默認會執行兩次（偶爾也會只執行一次，網上大部分說法認為這是Chrome的bug）。
2
3 解決方法：（為resize設置一個延遲）一般來說推薦新建一個標志位 延時復位控制它不讓它自己執行第二次，代碼如下：
4
5
6
7 Js代碼 收藏代碼
8 var firstOnResizeFire = true;//谷歌瀏覽器onresize事件會執行2次，這里加個標志位控制
9
10 window.onresize = function()
11 {
12 if (firstOnResizeFire) {
13 NfLayout.tabScrollerMenuAdjust(homePageWidth);
14 firstOnResizeFire = false;
15
16 //0.5秒之后將標志位重置（Chrome的window.onresize默認執行兩次）
17 setTimeout(function() {
18 firstOnResizeFire = true;
19 }, 500);
20 }
21
22 homePageWidth = document.body.clientWidth; //重新保存一下新寬度
23 }
24
25
26
27
28 例子：
29
30 監聽屏幕的改變：
31
32 Html代碼 收藏代碼
33 <!DOCTYPE html>
34 <html>
35 <head lang="en">
36 <meta charset="UTF-8">
37 <title></title>
38 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
39 <meta content="telephone=no" name="format-detection">
40 </head>
41 <body>
42 <label id="show"></label>
43 <script>
44 window.onresize = adjuest;
45 adjuest();
46 function adjuest(){
47 var label = document.getElementById("show");
48 label.innerHTML = "width = "+window.innerWidth+";height="+window.innerHeight;
49 }
50 </script>
51 </body>
52 </html>
效果：
1 2 .監聽div大小的改變
2
3
4
5 Html代碼 收藏代碼
6 <!DOCTYPE html>
7 <html>
8 <head lang="en">
9 <meta charset="UTF-8">
10 <title></title>
11 </head>
12 <body>
13 <div id="show_div" style="width: 100%;height: 300px;"></div>
14 <label id="show"></label>
15 <script>
16 window.onresize = adjuest;
17 adjuest();
18 function adjuest(){
19 var label = document.getElementById("show");
20 var divCon = document.getElementById("show_div");
21 label.innerHTML = "width = "+divCon.offsetWidth+";height="+divCon.offsetHeight;
22 }
23 </script>
24 </body>
25 </html>
效果：
