其他分享
首页 > 其他分享> > vue 中监听窗口发生变化，触发监听事件， window.onresize && window.addEventListener('resize'，fn) ，window.onre

vue 中监听窗口发生变化，触发监听事件， window.onresize && window.addEventListener('resize'，fn) ，window.onre

作者：互联网

复制代码 
 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>
复制代码

效果：

 

标签：function,代码,onresize,window,document,监听,adjuest
来源： https://www.cnblogs.com/lujh/p/15968920.html