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

Posted ajaxlu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 中监听窗口发生变化,触发监听事件, window.onresize && window.addEventListener('resize',fn) ,windo相关的知识,希望对你有一定的参考价值。

 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>  

效果:

技术图片

 

 

 

 

 

以上是关于vue 中监听窗口发生变化,触发监听事件, window.onresize && window.addEventListener('resize',fn) ,windo的主要内容,如果未能解决你的问题,请参考以下文章

JQuery如何监听一个DIV宽高的变化?

如何监听div内容的改变?

用JS或者jQuery可以监听浏览器窗口的变化吗

监听input变化的事件

vue事件监听

如何在Angular项目里监听页面关闭、跳转事件?