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 = this
	window.onresize = function(){
		_this.width = document.body.clientWidth
		// todo event
	}
}

需要注意的两点:

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

解决办法如下:

const  _this = this
window.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.onresize的详细使用

注意在项目中的使用

1、window.onresize只能在一个组件中使用,如果多个组件调用则会出现覆盖情况,所以我的解决方案是在App.vue中使用,获取document.documentElement.clientWidth(即浏览器宽度)存放在vuex中,别的组件只需要用computed(计算属性)将vuexclientWidth获取,然后通过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.onresize的详细使用

window.addEventListener


mounted() {
    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.toymoban.com/news/detail-461218.html

到了这里,关于window.onresize的详细使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Win7 专业版Windows time w32time服务电脑重启后老是已停止

    Win7 专业版 Win7 专业版Windows time w32time服务电脑重启后老是已停止 1.检查启动Remote Procedure Call (RPC)、Remote Procedure Call (RPC) Locator,DCOM Server Process Launcher这三个服务是否启动,属性里把启动类型选择为自动 2.设置w32time服务启动类型选择为自动(延迟启动) 3.重启电脑测试恢复正

    2024年02月14日
    浏览(50)
  • 【GTest】使用CMakeLitsts.txt构建Windows和Linux的跨平台GoogleTest项目(非常详细+亲测有效)

    👉博__主👈:米码收割机 👉技__能👈:C++/Python语言 👉公众号👈:测试开发自动化 👉专__注👈:专注主流机器人、人工智能等相关领域的开发、测试技术 Linux构建参考我的文章:【点击这里】 windows构建静态库参考我的文章:【点击这里】 (1)创建GtestAPI的文件夹,作为

    2024年02月07日
    浏览(56)
  • Docker 打包Python项目详细教程(Windows)

    参考教程 Windows安装使用Docker,方便你的开发和部署(DockerDesktop篇)_windows安装docker-CSDN博客 https://blog.csdn.net/qq_60750453/article/details/128636298 可以使用以下命令,验证docker是否安装成功 1. 输入docker version,出现客户端和服务器的信息 2. 输入docker run hello-world,并在Docker Desktop验证h

    2024年02月03日
    浏览(41)
  • Xcode 清空最近打开的项目

    打开Xcode任意项目 File - Open Recent - Clear Menu

    2024年02月09日
    浏览(40)
  • 我最近的练习一些全栈项目

    嘿,大家好!作为一个程序员,我突然出现在这里,就像程序里的一个Bug一样突兀。我知道我很久没有发博客了,你们一定在想,这家伙是被代码迷宫困住了还是被Bug们抓走了?实际上,我一直忙于处理一些琐碎的事情,比如寻找丢失的分号和与花括号的恶战。但是,我发现

    2024年02月06日
    浏览(35)
  • yolov5训练加速--一个可能忽视的细节(mmdetection也一样),为什么显卡使用率老是为0?

    本文仅讨论节省图片加载时间问题,这里面可能有一些容易忽视的细节。yolov5的训练参数里面有一个--cache,默认是ram,就是把解码后的图片保存在内存中。也可以是disk,就会把解码后的图片保存在硬盘上。  解码后的图片就是numpy数组啦,保存为.npy文件  这里可能有一个问

    2024年02月04日
    浏览(79)
  • Thinkphp获取项目最近更改变动的所有文件

    导读: 企业级的网站项目都是要不断优化迭代更新的,做为一名后端程序员,在编写更新模块时,如何能快速获取最近修改的文件,然后打包压缩成更新补丁呢?我们先来看一下最终效果图:  步骤: 一、在extend扩展目录创建一个名为 ChangesFile.php 的文件,代码如下: 二、

    2023年04月26日
    浏览(39)
  • 最近最火的互联网创业项目有哪些呢?

    众所周知,关于腾讯视频号在做灰度测试。从眼下的公测结果来说,视频号和公众号的无缝链接是打通的。这也就意味着短视频预告和直播,形成了一个生态闭环,引流效果会翻倍。   如果想做互联网创业,网络上五花八门。至于靠谱的项目,像热门、需求量大、门槛低、好

    2024年02月08日
    浏览(47)
  • 检测并批量导出项目文件中所有最近修改文件的实用工具

    本篇文章主要讲解工具的使用和操作教程,这是一个能够检测项目内最近修改的文件并保留路径导出文件的实用工具。 日期:2024年1月10日 这是一款可以帮助你自动检测并导出指定文件修改时间内的文件及文件目录的实用工具,在复杂的项目目录中有一天团队修改了很多文件

    2024年01月24日
    浏览(43)
  • 最近项目上需要发送短信整理了一篇文章 SpringBoot整合阿里云发送短信

    阿里云短信服务网址:阿里云登录 - 欢迎登录阿里云,安全稳定的云计算服务平台 第一步:申请签名(一般申请时长在1-2小时之间)特别注意:场景说明不要乱填以免申请不通过  第二步:申请短信模板(一般申请时长在1-2小时之间)特别注意:场景说明不要乱填以免申请不

    2024年02月06日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包