js 控制浏览器 实现全屏 和 退出全屏功能

在工作中我们偶尔遇到不需要浏览器导航栏和标题栏，需要将整个项目全屏展示的情况，虽然有一些快捷键可以实现此效果，但我们更希望项目中有类似的功能，可以让用户任意切换。

1、js 功能处理

//本案例只为演示打开全屏 和 退出全屏功能，具体交互根据需求自行完善
<template>
	// v3  可以不用外层div
	<div>
		<button @click="fullClick">打开全屏</button>
		<button @click="exitfull">退出全屏</button>
	</div>

</template>



<script setup>
// js 部分

const screenFull = (e) => {
    
    
    if (e.requestFullscreen) {
    
    
      e.requestFullscreen();
    } else if (e.mozRequestFullScreen) {
    
    
      e.mozRequestFullScreen();
    } else if (e.webkitRequestFullscreen) {
    
    
      e.webkitRequestFullscreen();
    } else if (e.msRequestFullscreen) {
    
    
      e.msRequestFullscreen();
    }
  };
  
// 退出全屏
  const exitfull = () => {
    
    
    var exitMethod =
      document.cancelFullScreen ||
      // document.webkitCancelFullScreen ||
      document.mozCancelFullScreen ||
      document.exitFullScreen;

    if (exitMethod) {
    
    
     
      exitMethod.call(document);
    } else if (window.ActiveXObject) {
    
    
    
      var wscript = new ActiveXObject('WScript.Shell');
      if (wscript != null) {
    
    
        wscript.SendKeys('{F11}');
      }
    }
  };

  // 打开全屏
  const fullClick = () => {
    
    
    screenFull(document.documentElement);
  
  };

</script>

2、手动操作处理

谷歌浏览器Chrome

右上角菜单—设置—外观–隐藏书签栏

2、快捷键

Mac电脑 快捷键：command + shift + f

Windows： 按F11键

火狐浏览器 Firefox

1、全屏模式下–点击工具栏—右键—选择隐藏工具栏
2、如果标题栏还存在的话----command + shift + b