投稿
  1. Intoep.com技术交流网站首页
  2. 前端开发
  3. Html/CSS

js通过单击按钮实现全屏、退出全屏

howkunet • • Html/CSS, JavaScript, 前端开发 • 阅读 103

js通过单击按钮实现全屏、退出全屏

<el-button size="mini" type="success" @click="intScreen">全屏显示</el-button>
<el-button size="mini" type="success" @click="outScreen">退出全屏</el-button>
// 全屏
intScreen() {
  var docElm = document.documentElement;
  if (docElm.requestFullscreen) {  //W3C
    docElm.requestFullscreen();
  } else if (docElm.mozRequestFullScreen) {   //FireFox
    docElm.mozRequestFullScreen();
  } else if (docElm.webkitRequestFullScreen) {  //Chrome等
    docElm.webkitRequestFullScreen();
  } else if (elem.msRequestFullscreen) {  //IE11
    elem.msRequestFullscreen();
  }
},
// 退出全屏
outScreen() {
   if (document.exitFullscreen) {
     document.exitFullscreen();
   } else if (document.mozCancelFullScreen) {
     document.mozCancelFullScreen();
   } else if (document.webkitCancelFullScreen) {
     document.webkitCancelFullScreen();
   } else if (document.msExitFullscreen) {
     document.msExitFullscreen();
   }
 },

或者监听屏幕变化的大小进行相应的操作
例如：我这里兼容了两种分辨率下的屏幕.按f11就影藏侧边栏和标题等等

window.addEventListener('resize', ()=> {
  var height = document.documentElement.clientHeight;
  var width = document.documentElement.clientWidth;
  if((height >= 1079 && width == 1920) || (height >= 1049 && width == 1680)){
    this.main = true;
    this.aside = false;
  }else{
    this.main = false;
    this.aside = true;
  }
})

 

Intoep小程序

微信扫一扫，打开小程序浏览更便捷

转载作品，原作者：曾经的你h，文章来源：https://www.toutiao.com/article/7085531354125107723

赞 (1)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
howkunethowkunet管理团队
0 0
上一篇 2022年4月12日 23:36
下一篇 2022年4月14日 17:45

相关推荐

发表回复

登录后才能评论
首页
购物
网址导航