vue 中监听窗口发生变化，触发监听事件， window.onresize && window.addEventListener('resize'，fn) ，window.onresize无效的处理方式
// 开始这样写，不执行
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无效的处理方式的更多相关文章
- 【转】Vue中mintui的field实现blur和focus事件
首先上代码说总结: <mt-field label="卡号" v-model="card.cardNo" @blur.native.capture=&qu ...
- 小程序的数据监听 用法和vue中的watch一样====使用通配符监听所有自数据字段的变化
使用通配符监听所有自数据字段的变化
- Python窗口学习之监听窗口变化触发函数
在窗口大小发生变化后,往往组件也需要调整 代码: #空间适应屏幕 def window_resiz(self,event=None): print(window.winfo_height()) pri ...
- vue中watch和computed为什么能监听到数据的改变以及不同之处
先来个流程图,水平有限,凑活看吧-_-|| 首先在创建一个Vue应用时: var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } ...
- vue中eventbus被多次触发（vue中使用eventbus踩过的坑）【bus.$on事件被多次绑定】
问题描述:只要页面没有强制刷新,存在组件切换,bus.$on方法会被多次绑定,造成事件多次触发 触发bus.$on中绑定的方法.png bus.$on多次绑定.png 解决办法:在每次调用方法 ...
- Vue中父组件使用子组件的emit事件，获取emit事件传出的值并添加父组件额外的参数进行操作
需求是这样的,需要输入这样一个列表的数据,可以手动添加行,每一行中客户编号跟客户姓名是自动关联的,就是说选取了客户姓名之后,客户编号是自动填充的,客户姓名是一个独立的组件,每一个下拉项都是一个大的对象 ...
- vue中一个dom元素可以绑定多个事件？
其实这个问题有多个解决方法的 这里提出两点 第一种 第二种 现在dom上绑定一个 然后在你的methods中直接调用 如果要传参数 这时候千万别忘记 原创 如需转载注明出处 谢谢
- 父窗口jquery触发iframe按钮事件(转载)
原文地址: http://blog.csdn.net/muziduoxi/article/details/11123923 <script type="text/javascript& ...
- vue中进行窗口变化的监听
今天vue项目中用到的元素的宽度依赖与窗口的宽度,所以在进行宽度设置的时候涉及到窗口的变化,因为元素的宽度要随着窗口变化 分成几个步骤来实现这一过程 1.首先元素的宽度依赖与窗口的宽度,就需要有接受窗 ...
随机推荐
- 再谈js对象数据结构底层实现原理-object array map set
如果有java基础的同学,可以回顾下<再谈Java数据结构—分析底层实现与应用注意事项>:java把内存分两种:一种是栈内存,另一种是堆内存.基本类型(即int,short,long,by ...
- json字符串转成 json对象 json对象转换成java对象
import com.alibaba.fastjson.JSONArray;import com.alibaba.fastjson.JSONObject; 依赖包 <dependency> ...
- gzip 命令
NAME gzip -- compression/decompression tool using Lempel-Ziv coding (LZ77) SYNOPSIS gzip [-cdfhkLlNn ...
- 课程计划安排 ver: 2016-12-14
录的越多,后续肯定会涨价. <x86 从实模式到保护模式> 这本书涉及到除了汇编语言,还有一些计算机架构和操作系统方面相关的知识点. 不仅为学习高级编程语言打下了非常扎实的基础,学完C++ ...
- kafka安装使用配置1.1
官方文档 rz上传到/usr/local/下 解压 tar xzvf 文件 改名 mv 文件 名字 环境变量 vi /etc/profile export KAFKA_HOME=/usr/local/ ...
- 从入门到自闭之Python闭包
闭包 定义:在嵌套函数内,使用(非本层变量)非全局变量就是闭包 闭包必须是内层函数对外层函数的变量(非全局变量)的引用 函数执行完毕后,函数体内的空间自行销毁 def func(): a=1 def ...
- LinkedList实现基于LRU算法的缓存
LinkedList实现基于LRU算法的缓存 2015年08月07日 18:18:45 秦江波 阅读数 2068 文章标签: java算法linkedlist缓存LRU更多 分类专栏: Java ...
- leetcode题库
leetcode题库 #题名题解通过率难度出现频率 1 两数之和 46.5%简单2 两数相加 35.5%中等3 无重复字符的最长子串 31.1%中等4 寻找两个有序数组的中位 ...
- 剑指offer-数组中只出现一次的数字-数组-python
题目描述 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字. # -*- coding:utf-8 -*- class Solution: # 返回[a, ...
- CF1151F Sonya and Informatics
cf luogu 我们最终要的序列一定是前面全是0,后面全是1,假设总共\(m\)个0,那么这等价于前\(m\)位0的个数为\(m\).当然一开始可能数量没有\(m\) 那就把前\(m\)位0的数量作 ...