//  开始这样写，不执行

  window.onresize = function() {

      console.log('窗口发生变化')

 }

 // 改成window监听事件

 window.addEventListener('resize', function() {

     console.log('窗口发生变化')

 }）

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有效，可以其它方式同时触发。

 .浏览器尺寸变化响应事件 ：

 Js代码  收藏代码

 window.onresize = function(){....}    

   获取变更后参数：

 Js代码  收藏代码

 // 获取到的是变更后的页面宽度

 var currentWidth = document.body.clientWidth;

   这里需要注意的是，onresize响应事件处理中，因为已经刷新页面，所以获取到的页面尺寸参数是变更后的参数。

   如果需要使用到变更之前的参数，需要建一个全局变量保存之前的参数（并且记得在onresize事件中刷新这个全局变量保存新的参数值）。
 .谷歌浏览器中  window.onresize 事件默认会执行两次（偶尔也会只执行一次，网上大部分说法认为这是Chrome的bug）。 

   解决方法：（为resize设置一个延迟）一般来说推荐新建一个标志位 延时复位控制它不让它自己执行第二次，代码如下：

 Js代码  收藏代码

 var firstOnResizeFire = true;//谷歌浏览器onresize事件会执行2次，这里加个标志位控制    

 window.onresize = function()

 {

  if (firstOnResizeFire) {

   NfLayout.tabScrollerMenuAdjust(homePageWidth);

   firstOnResizeFire = false;    

   //0.5秒之后将标志位重置（Chrome的window.onresize默认执行两次）

   setTimeout(function() {

    firstOnResizeFire = true;

         }, );

  }    

  homePageWidth = document.body.clientWidth; //重新保存一下新宽度

 }    

 例子：

 监听屏幕的改变：

 Html代码  收藏代码

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">

     <meta content="telephone=no" name="format-detection">

 </head>

 <body>

 <label id="show"></label>

 <script>

     window.onresize = adjuest;

     adjuest();

     function adjuest(){

        var label = document.getElementById("show");

        label.innerHTML = "width = "+window.innerWidth+";height="+window.innerHeight;

     }

 </script>

 </body>

 </html>

效果：

  .监听div大小的改变

 Html代码  收藏代码

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

 <div id="show_div" style="background-color: lightblue;width: 100%;height: 300px;"></div>

 <label id="show"></label>

 <script>

     window.onresize = adjuest;

     adjuest();

     function adjuest(){

         var label = document.getElementById("show");

         var divCon = document.getElementById("show_div");

         label.innerHTML = "width = "+divCon.offsetWidth+";height="+divCon.offsetHeight;

     }

 </script>

 </body>

 </html>

效果：

vue 中监听窗口发生变化，触发监听事件， window.onresize && window.addEventListener('resize'，fn) ，window.onresize无效的处理方式的更多相关文章

  1. 【转】Vue中mintui的field实现blur和focus事件

    首先上代码说总结: <mt-field label="卡号" v-model="card.cardNo" @blur.native.capture=&qu ...

  2. 小程序的数据监听 用法和vue中的watch一样====使用通配符监听所有自数据字段的变化

    使用通配符监听所有自数据字段的变化

  3. Python窗口学习之监听窗口变化触发函数

    在窗口大小发生变化后,往往组件也需要调整 代码: #空间适应屏幕 def window_resiz(self,event=None): print(window.winfo_height()) pri ...

  4. vue中watch和computed为什么能监听到数据的改变以及不同之处

    先来个流程图,水平有限,凑活看吧-_-|| 首先在创建一个Vue应用时: var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } ...

  5. vue中eventbus被多次触发（vue中使用eventbus踩过的坑）【bus.$on事件被多次绑定】

    问题描述:只要页面没有强制刷新,存在组件切换,bus.$on方法会被多次绑定,造成事件多次触发   触发bus.$on中绑定的方法.png   bus.$on多次绑定.png 解决办法:在每次调用方法 ...

  6. Vue中父组件使用子组件的emit事件，获取emit事件传出的值并添加父组件额外的参数进行操作

    需求是这样的,需要输入这样一个列表的数据,可以手动添加行,每一行中客户编号跟客户姓名是自动关联的,就是说选取了客户姓名之后,客户编号是自动填充的,客户姓名是一个独立的组件,每一个下拉项都是一个大的对象 ...

  7. vue中一个dom元素可以绑定多个事件？

    其实这个问题有多个解决方法的  这里提出两点 第一种 第二种 现在dom上绑定一个 然后在你的methods中直接调用 如果要传参数  这时候千万别忘记 原创 如需转载注明出处 谢谢

  8. 父窗口jquery触发iframe按钮事件(转载)

    原文地址: http://blog.csdn.net/muziduoxi/article/details/11123923 <script type="text/javascript& ...

  9. vue中进行窗口变化的监听

    今天vue项目中用到的元素的宽度依赖与窗口的宽度,所以在进行宽度设置的时候涉及到窗口的变化,因为元素的宽度要随着窗口变化 分成几个步骤来实现这一过程 1.首先元素的宽度依赖与窗口的宽度,就需要有接受窗 ...

随机推荐

  1. 【Windows】Windows server2008远程桌面只允许同时存在一个会话

    打开控制面板-管理工具,终端服务-终端服务配置 1.连接:RDP-tcp 点右键,属性.网络适配器-最大连接数,只允许1个. 2.终端服务器授权模式:点右键,属性.常规,限制每个用户只能使用一个会话, ...

  2. WebMvcConfigurationSupport与WebMvcConfigurer的关系

    大家从网上及源码注释上查到的解释是,在spring中配置WebMvc时有两种方法,一种是继承WebMvcConfigurationSupport,重写里面相应的方法,还有一种是继承WebMvcConf ...

  3. stm32 F40x CCM数据区的使用

    1. CCM需要打开总线时钟 2. CCM可以作为堆和栈使用 使用分散加载文件直接操作即可 RW_CCMRAM1 0x10000000 { .ANY (HEAP) .ANY (STACK) } 3. ...

  4. redis缓存穿透00

    缓存穿透 缓存穿透,是指查询一个数据库一定不存在的数据.正常的使用缓存流程大致是,数据查询先进行缓存查询,如果key不存在或者key已经过期,再对数据库进行查询,并把查询到的对象,放进缓存.如果数据库 ...

  5. const和static const的区别(未整理)

    对于C/C++语言来讲,const就是只读的意思,只在声明中使用;static一般有2个作用,规定作用域和存储方式.对于局部变量,static规定其为静态存储方式,每次调用的初始值为上一次调用的值,调 ...

  6. React应该如何优雅的绑定事件？

    前言 由于JS的灵活性,我们在React中其实有很多种绑定事件的方式,然而,其实有许多我们常见的事件绑定,其实并不是高效的.所以本文想给大家介绍一下React绑定事件的正确姿势. 常见两种种错误绑定事 ...

  7. java实现spark常用算子之distinct

    import org.apache.spark.SparkConf;import org.apache.spark.api.java.JavaRDD;import org.apache.spark.a ...

  8. git取消操作命令

    1,移除git add . 的内容 git reset HEAD 2,移除git commit 的内容(commit_A是文件名) git rebase -i commit_A

  9. Python新式类与经典类(旧式类)的区别

    看写poc的时候看到的,思考了半天,现在解决了 转载自http://blog.csdn.net/zimou5581/article/details/53053775 Python中类分两种:旧式类和新 ...

  10. linux使用VNC服务轻松远程安装oracle

    VNC服务在远程服务器上安装oracle,新手安装oracle时总会遇到这样或者那样的问题,下面我就详细解说一下安装过程,其实oracle安装很简单,并不要把他相像的特别复杂. 本环境用:centos ...