首页 > 其他分享 >JS 打开、关闭浏览器全屏

JS 打开、关闭浏览器全屏

时间:2022-10-18 15:15:27浏览次数:55  
标签:浏览器 JS isFullscreen else 全屏 document docElm requestFullscreen

一、打开全屏

requestFullscreen () {
  const docElm = document.documentElement
  if (docElm.requestFullscreen) {
    docElm.requestFullscreen()
  } else if (docElm.msRequestFullscreen) {
    docElm.msRequestFullscreen()
  } else if (docElm.mozRequestFullScreen) {
    docElm.mozRequestFullScreen()
  } else if (docElm.webkitRequestFullScreen) {
    docElm.webkitRequestFullScreen()
  }
}

二、判断是否处于全屏状态

function isFullscreen () {
  return document.fullscreenElement ||
  document.msFullscreenElement ||
  document.mozFullScreenElement ||
  document.webkitFullscreenElement || false;
}

三、退出全屏

  exitFullScreen () {
    if(isFullscreen()){
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen()
      }
    }
}

四、注意点

退出全屏的时候,一定要先执行isFullscreen函数,看一下当前是处于全屏状态,才能再执行关闭全屏的代码,否则不是处于全屏状态执行退出全屏代码就会报错

 

标签:浏览器,JS,isFullscreen,else,全屏,document,docElm,requestFullscreen
From: https://www.cnblogs.com/liumingwang/p/16802596.html

相关文章

  • Go:Json转结构体
    解决实际需求,案例分享。请求ZabbixAPI,通过itemid获取到AppName(应用集名称)packagemainimport( "encoding/json" "fmt" "io/ioutil" "log" "net/http" "str......
  • dd_jsapi
    调用<scriptsetuplang="ts">import{departmentsPicker}from"@/utils/lib/dd";import{ref}from"vue";interfaceDdDepartment{id:number;name:str......
  • JSON.stringify和JSON.parse()
    一.定义和作用1.JSON.stringify方法将某个对象转换成JSON字符串形式constuserInfo={name:'hong',age:20}console.log(JSON.stringify(userInfo))//{"name":......
  • 原生js导出word、导出excel
    导出word文件导出部分HTML成word文件。注意:部分样式word不支持,图片需要设置width和height属性/***下载文件*@param{string}url文件地址*@param{string}f......
  • 断点js-断点续传-大文件断点上传
    ​ javaweb上传文件上传文件的jsp中的部分上传文件同样可以使用form表单向后端发请求,也可以使用ajax向后端发请求    1.通过form表单向后端发送请求     ......
  • 再添神器!Paddle.js 发布 OCR SDK
    关键词:OCR、Paddle.js、PaddleOCR01前言OCR(OpticalCharacterRecognition,光学字符识别)是文字识别的统称,不仅支持文档或书本文字识别,还包括识别自然场景下的文字,又可以称为......
  • 快速解决谷歌浏览器自带翻译不好用的问题
    工具先说工具,我写了一个小工具,可以快速修改,不需要任何其他知识。其中"修改的Ip"为本次你要修改的Ip地址,如果之前你已经修改过了,这里会显示现在的IP,如果没有,这里是空的。如......
  • JSP中文乱码问题
    中文乱码问题(1)中文无法显示没有把头文件上的字符集设置为中文字符集①<%@pagelanguage="java"pageEncoding="gb2312"%>②<%@pagelanguage="java"contentType="te......
  • selenium 浏览器驱动下载安装(chrome)
    selenium下载地址https://pypi.org/project/selenium/4.0.0/#filesFireFox驱动下载地址https://github.com/mozilla/geckodriver/releaseschromeDriver下载地址ht......
  • QDAC使用记录-QJson
    一:数组创建varFJson:=TQJson.Create;try withFJson.AddArray('Arr')do begin  fori:=0to1do  begin   withadddo   begin  ......