1 // 開始這樣寫，不執行 2 window.onresize = function() { 3 console.log('窗口發生變化') 4 } 5 6 7 // 改爲window監聽事件 8 window.addEventListener('resize', function() { 9 console.log('窗口發生變化') 10 }）
onresize的定義方式html
1、直接在html中定義瀏覽器
如<body onresize="doResize()"/>spa
2、直接給onresize賦值scala
能夠給window和body的onresize賦值code
如window.onresize=function(){},document.body.onresize=function(){}orm
3、使用事件監聽htm
只對window有做用blog
如window.addEventListener("resize",fn);事件
說明：ip
一、直接給onresize賦值會覆蓋在html中定義。
二、直接給onresize賦值，window,body只有一個起做用，後定義的會覆蓋先定義的
三、事件監聽只對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="background-color: lightblue;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>
效果：