位置: IT常识 - 正文

window.onresize的详细使用($(window).resize)

编辑:rootadmin
window.onresize的详细使用

推荐整理分享window.onresize的详细使用($(window).resize),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:windows resize,window resized,window.onresize 怎么用,$(window).resize,windows.onresize,$(window).resize,window. onresize,window. onresize,内容如对您有帮助,希望把文章链接给更多的朋友!

最近做的项目老是涉及到大小屏切换,但是因为屏幕宽高不一样的原因,老是要计算表格高度

window.onresize:监听window窗口变化,当窗口大小发生变化时,会触发此事件

含义

MDN中的定义是这样子的:

文档视图调整大小时会触发 resize事件。

在js中使用window.onresize = function(){// todo event}在html中使用<body onresize="myFunction()">在vue中的使用

需要注意的是,this在函数中指的是window,而不是vue实例

mounted(){const _this = thiswindow.onresize = function(){_this.width = document.body.clientWidth// todo event}}需要注意的两点:

1、this在函数中不可用,他在函数中不一定指全局上下文

解决办法如下:

const _this = thiswindow.onresize = function(){_this.width = document.body.clientWidth}

2、在谷歌浏览器中,window.onresize会触发两次,网上说是谷歌浏览器的bug

解决办法如下,设定一个标识

let flag = true window.onresize = function () { if (flag) { console.log(new Date(), '窗口改变了') flag = false } let timeId = setTimeout(() => { flag = true timeId = null // 清除延时定时器 }, 1000) }

没使用flag之前

window.onresize的详细使用($(window).resize)

使用之后,如下图,控制台只打印了一遍

注意在项目中的使用

1、window.onresize只能在一个组件中使用,如果多个组件调用则会出现覆盖情况,所以我的解决方案是在App.vue中使用,获取document.documentElement.clientWidth(即浏览器宽度)存放在vuex中,别的组件只需要用computed(计算属性)将vuex的clientWidth获取,然后通过watch监听clientWidth的值,即可触发组件事件

2、由于window.onresize是全局事件,在其他页面改变界面时也会执行,这样可能会出现问题,需要在出这个界面时注销window.onresize事件。

created() { this.$bus.$on('resize', this.$_setTableHeight) window.onresize = function () { console.log(new Date(), '窗口改变了') }},beforeDestroy() { this.$bus.$off('resize', this.$_setTableHeight) window.onresize = null},

注销之后,切换到其他页面,控制台就不会输出以下信息

window.addEventListenermounted() { this.$nextTick(() => { this.onDrawLine() window.addEventListener('resize', this.resize()) }) }, beforeDestroy() { console.log('删除了')// 具名函数使用removeEventListener清除,但是匿名函数不行 window.removeEventListener('resize', this.resize()) },性能优化

window.onresize 在监听窗口变化时,固然起到很好的效果,但是对于网页性能消耗过大。因为html中每个标签的变化,都会触发window.onresize 事件,比如显示/隐藏某个抽屉、添加/删除某个div等等,很有可能会造成循环触发和无限制触发,于是新推出了另外一个事件**ResizeObserver(对element和svgelement元素进行监听)**

MDN定义如下:

ResizeObserver避免了通过回调函数调整大小时,通常创建的无限回调循环和循环依赖项。它只能通过在后续的帧中处理 DOM 中更深层次的元素来做到这一点。如果它的实现遵循规范,则应在绘制前和布局后调用 resize 事件。

MDN示例:https://mdn.github.io/dom-examples/resize-observer/resize-observer-text.html

部分源码如下:

const h1Elem = document.querySelector('h1');const pElem = document.querySelector('p');const divElem = document.querySelector('body > div');const slider = document.querySelector('input[type="range"]');const checkbox = document.querySelector('input[type="checkbox"]');divElem.style.width = '600px';slider.addEventListener('input', () => { divElem.style.width = `${slider.value}px`;})const resizeObserver = new ResizeObserver((entries) => { for (const entry of entries) { if (entry.contentBoxSize) { // Firefox implements `contentBoxSize` as a single content rect, rather than an array const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize; h1Elem.style.fontSize = `${Math.max(1.5, contentBoxSize.inlineSize / 200)}rem`; pElem.style.fontSize = `${Math.max(1, contentBoxSize.inlineSize / 600)}rem`; } else { h1Elem.style.fontSize = `${Math.max(1.5, entry.contentRect.width / 200)}rem`; pElem.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`; } } console.log('Size changed');});resizeObserver.observe(divElem);checkbox.addEventListener('change', () => { if (checkbox.checked) { resizeObserver.observe(divElem); } else { resizeObserver.unobserve(divElem); }});

副作用:兼容性不强,有些浏览器兼容,具体情况见Can I Use

参考链接:

https://www.cnblogs.com/yxysuanfa/p/6878016.html

https://www.jb51.net/article/245030.htm

https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver

本文链接地址:https://www.jiuchutong.com/zhishi/283956.html 转载请保留说明!

上一篇:【香港回归22周年】 (© ViewStock/Getty Images)(2020香港回归23年)

下一篇:小米路由器2代1T版本 PC端使用远程下载的详细方法(小米路由器2代改8t)

  • 三证合一后纳税人识别号和信用代码一样吗
  • 企业的进项税额怎么算
  • 税收筹划的内容主要包括
  • 厂房办公费属于什么会计科目
  • 计提房产税和土地使用税附件
  • 一般纳税人进项销项抵扣如何做账
  • 开专用发票可以直接写加工费这个明细吗
  • 盘盈的固定资产怎么做账务处理
  • 企业出现税务问题的案例
  • 保险企业汇算清缴规定
  • 个税手续费返还计入哪个科目
  • 维修 物业
  • 收到政府补助的固定资产的账务处理
  • 应收账款换入固定资产双方账务处理
  • 转出未交增值税借方余额怎么处理
  • 企业融资租赁设立条件
  • 劳务发票未收到做账
  • 转账支票怎么进账到个人账户
  • 合伙企业个人所得税经营所得税率
  • 继承或赠与所得的房产
  • 股权案例分析2020
  • 贷款逾期账务处理流程
  • 员工垫付费用多久报销合理
  • 小企业会计准则会计科目表
  • 苹果电脑型号怎么查
  • 华为手机隐藏应用
  • 公司废业
  • 押金未退会计分录
  • 产品成本核算应正确划分哪些方面的费用界限
  • php 调试工具
  • 信用减值损失属于损益类科目吗
  • 会计核算的职能主要是从什么方面综合反映
  • 出售还在摊销的产品
  • Squarespace 和 WordPress 的区别
  • 开发商提供物业用房的法律依据
  • 结转在建工程的会计分录
  • 借款需要缴纳个人所得税吗
  • sqlserver创建维护计划
  • 预充值发票可以报销吗
  • 一般纳税人劳务费税率是多少2023
  • 小规模纳税人可以开13的税吗
  • 预付账款用途
  • 专票不小心印上划痕
  • 货款去零头分录
  • 住宿费报销该怎么报
  • 发工资时多打给员工的钱
  • 蓝字发票作废流程视频
  • 农业合作社账务都有什么科目
  • 简易计税开具的发票取得的进项可以抵扣嘛
  • 企业如何进行利润分配的会计处理
  • 长期借款短期利息怎么算
  • 商场收租户电费会计分录
  • 行政事业单位支出范围和标准
  • 股东可用什么方式出资
  • 去年的会计凭证做错了,今年发现要怎么修改
  • 行政单位如何做好机构编制工作
  • sql数据库检查命令
  • linux安装openssh-server
  • 看linux系统
  • wpr02
  • 使用u盘安装windows10电脑识别不出来
  • win8怎么彻底删除软件
  • win8共享文件
  • win7任务栏窗口总是自动切换
  • fsck.mode
  • centos安装c编译器
  • linux tar命令安装
  • unity手机游戏开发教程
  • vuerouter嵌套路由
  • AnalogClock
  • 反序存放字符串
  • unity怎么新建项目
  • nodejs常用内置模块
  • javascript快速入门
  • unity怎么录屏
  • python自动化运维教程
  • 甘肃国家税务局兰州专用章图片
  • 经营租赁属于什么费用
  • 四川增值税发票图片
  • 税务报运维需要多长时间
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设