位置: 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)

  • 屏幕使用时间有什么用(屏幕使用时间有时候显示不出来)

    屏幕使用时间有什么用(屏幕使用时间有时候显示不出来)

  • 小米路由器黄灯之后一直红灯闪烁(小米路由器黄灯常亮没有wifi)

    小米路由器黄灯之后一直红灯闪烁(小米路由器黄灯常亮没有wifi)

  • qq信息怎么显示屏幕上(QQ信息怎么显示未读)

    qq信息怎么显示屏幕上(QQ信息怎么显示未读)

  • 华为手机自动朗读屏幕怎么弄(华为手机自动朗读屏幕快捷关闭)

    华为手机自动朗读屏幕怎么弄(华为手机自动朗读屏幕快捷关闭)

  • qq幸运字符vir是什么意思(qq幸运字符标识above)

    qq幸运字符vir是什么意思(qq幸运字符标识above)

  • qq授权失败110509什么意思(qq授权错误)

    qq授权失败110509什么意思(qq授权错误)

  • 手机静态ip地址怎么填写(手机静态ip地址怎么获取)

    手机静态ip地址怎么填写(手机静态ip地址怎么获取)

  • 红米k30移动信号经常无服务(红米k305g版信号差)

    红米k30移动信号经常无服务(红米k305g版信号差)

  • wan口一直连接不上(wan口连接失败怎么回事)

    wan口一直连接不上(wan口连接失败怎么回事)

  • snkrs取消订单后,钱什么时候会返还(snkrs取消订单有影响)

    snkrs取消订单后,钱什么时候会返还(snkrs取消订单有影响)

  • 手机qq怎么发送文件夹给别人(手机qq怎么发送软件给好友)

    手机qq怎么发送文件夹给别人(手机qq怎么发送软件给好友)

  • 手机照片回收站怎么找(手机照片回收站删了还能找回吗)

    手机照片回收站怎么找(手机照片回收站删了还能找回吗)

  • cpu影响电脑什么性能(cpu影响电脑流畅吗)

    cpu影响电脑什么性能(cpu影响电脑流畅吗)

  • 苹果指纹失灵的原因(苹果指纹失灵怎么办)

    苹果指纹失灵的原因(苹果指纹失灵怎么办)

  • 一起听歌怎么开启(一起听歌怎么开麦)

    一起听歌怎么开启(一起听歌怎么开麦)

  • qq删除留言对方知道吗(qq删除留言对方能看见吗)

    qq删除留言对方知道吗(qq删除留言对方能看见吗)

  • surface型号1796是什么(名称:surface pro 型号: 1796)

    surface型号1796是什么(名称:surface pro 型号: 1796)

  • 计算器中的cnc代表着(计算器的cnc是什么键)

    计算器中的cnc代表着(计算器的cnc是什么键)

  • 小米手机网速慢怎么调(小米手机网速慢怎么设置)

    小米手机网速慢怎么调(小米手机网速慢怎么设置)

  • 怎样把视频传到抖音(怎样把视频传到车的屏幕上)

    怎样把视频传到抖音(怎样把视频传到车的屏幕上)

  • 苹果蓝牙耳机二代怎么充电(苹果蓝牙耳机二代和三代哪个好用)

    苹果蓝牙耳机二代怎么充电(苹果蓝牙耳机二代和三代哪个好用)

  • 苹果11与苹果11pro的区别(苹果11与苹果11pro推荐)

    苹果11与苹果11pro的区别(苹果11与苹果11pro推荐)

  • 金山文档怎么解除绑定(金山文档怎么解除权限限制)

    金山文档怎么解除绑定(金山文档怎么解除权限限制)

  • Darts, 双数组Trie  文字处理技术  STPDomain  Powered by Discuz!(双重数组)

    Darts, 双数组Trie 文字处理技术 STPDomain Powered by Discuz!(双重数组)

  • 小规模纳税人减按1%如何填报申报表
  • 不征税收入有哪些增值税
  • 中国注册税务师协会法律法规库
  • 纳税期限届满
  • 跨年度进项税额转出怎么申报
  • 三免三减半如何申报企业所得税
  • 报废固定资产产生的净损益属于利得吗
  • 非工作日是否可以开标
  • 纳税人出租不动产预缴税款
  • 快消品行业成本结转方法
  • 现金预算表中的利息怎么算
  • 外购商品对外捐赠分录
  • 哪些企业可以享受加计抵减政策
  • 企业增加注册资金怎么办理
  • 员工工资怎么计算公式
  • 预计销售退回的钱怎么算
  • 新公司成立前期人员配置
  • 无形资产的初始计量和后续计量
  • 收购个人独资企业的税收
  • 买酒 专票
  • 日用品增值税税率
  • 发票抬头写个人有效吗
  • 有限合伙企业对外转让财产份额
  • 合并后的新企业有哪些
  • 长期待摊未摊完处置如何账务处理
  • 公司发放的车补扣个人所得税吗
  • 认缴资本 实收资本
  • 回迁安置房拆一次多少钱
  • 研发费收入属于什么收入
  • 月末累计折旧怎么结转
  • 预付款项属于什么会计要素
  • 筹建期的开办费需要归集后才能一次性扣除吗
  • windows11正式版好用吗
  • 企业从政府取得的经济资源均应当
  • windows10护眼色设置
  • 境外代扣代缴企业所得税的计税依据包含企业所得税嘛
  • PHP:imagepsloadfont()的用法_GD库图像处理函数
  • PHP:imagefilledpolygon()的用法_GD库图像处理函数
  • yarn install报错
  • 残保金的会计处理
  • 城建税教育费附加什么时候交
  • 项目部署计划
  • web前端三大主流框架vue
  • 代理进口业务应纳的关税
  • 拆迁支出包括哪些
  • 帝国CMS根据不同会员组显示不同内容的方法
  • 技术服务收入属于什么收入
  • 企业的净资产都有哪些
  • 附加税计税依据扣除留抵退税
  • mysql命令行删除库中的所有表
  • 保险公司报销修车流程
  • 房地产会计开发工资高吗
  • 汽车租赁行业税负是多少
  • 进项发票未认证
  • 定期定额征收和核定征收的哪种税率高
  • 在建工程科目核算只针对固定资产吗
  • 交易性金融资产属于流动资产
  • 计提销售费用什么意思
  • 将自产的产品用于非应税项目
  • 购入固定资产的增值税计入成本吗
  • 收到客户账款会计分录
  • 做好年底冲刺
  • 多计提房产税怎么冲销
  • 一般户和基本户怎么使用最好
  • centos清理磁盘空间
  • win7系统打开网络看不到其他电脑
  • 应用商店如何更新软件
  • win7移动硬盘写保护了怎么解除
  • win8安装itunes
  • javascript运用
  • 批量替换在哪
  • cssli
  • OpenGL Framebuffer Object (FBO)
  • jquery 元素
  • 陌陌2021年最近事件
  • javascript怎么学
  • python面向
  • 收到免税的苗木发票怎么做账
  • 地税是地方税吗
  • 诚信励志语录经典短句
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设