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="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>
效果：
