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

2022-03-05 18:34:24 阅读：153 来源： 互联网

标签：function 代码 onresize window document 监听 adjuest

 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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