1 // begin write is not performed
2 window.onresize = function () {
. 3 the console.log ( ' window changes ' )
4 }
. 5
. 6
. 7 // change event listener window
. 8 window.addEventListener ( ' a resize ' , function () {
. 9 the console.log ( ' window changes ' )
10 })
onresize defined way
A, defined directly in html
如<body onresize="doResize()"/>
Second, the direct assignment to onresize
onresize can be assigned to the window and the body
如window.onresize=function(){},document.body.onresize=function(){}
Third, using event listeners
Only have an effect on window
如window.addEventListener("resize",fn);
Description:
1, directly to the onresize assignment will cover the definition in html.
2, directly to onresize assignment, window, body only a work, will cover the definition of the first definitions
3, event listeners only valid window can be triggered simultaneously in other ways.
. 1 . 1 Browser dimensional change in response to events:
2
. 3 Js collection Code Code
. 4 window.onresize = function () {....}
. 5
. 6
. 7 acquires the changed parameters:
. 8
. 9
10
. 11 Js collection Code Code
12 // Get to the changed page width is
13 is var currentWidth = document.body.clientWidth;
14 it should be noted that, in response to an event onResize process, since it has been refresh the page, the page size to obtain the parameter is a parameter after the change.
15
16
17
18 parameters If you need to change before, need to build a global variable parameters before saving (and remember to refresh the global variable to save the new parameter values in onresize event).
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>
效果：
