用js来实现页面全屏和退出全屏的功能

简介: 用js来实现页面全屏和退出全屏的功能

在JavaScript中实现全屏功能,通常我们使用HTML5的 Fullscreen API。下面是一个基本的例子:

function openFullscreen(elem) {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari 和 Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
  }
}
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) { /* Firefox */
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE/Edge */
    document.msExitFullscreen();
  }
}

在这个例子中,openFullscreen 函数接受一个元素 elem 作为参数,并尝试将这个元素置于全屏模式。类似地,closeFullscreen 函数尝试退出全屏模式。

要使用这些函数,你可以将一个元素作为参数传递给 openFullscreen,或者调用 closeFullscreen 函数来退出全屏模式。例如:

 

let elem = document.documentElement; /* 全屏整个页面 */
openFullscreen(elem);

请注意,全屏请求通常需要在用户交互(如点击或键盘事件)的结果中进行,否则浏览器可能会阻止全屏模式

相关文章
|
17天前
|
JavaScript 前端开发
js实现点击音频实现播放功能
js实现点击音频实现播放功能
|
17天前
|
前端开发 JavaScript
使用JavaScript实现复杂功能:构建一个自定义的拖拽功能
使用JavaScript实现复杂功能:构建一个自定义的拖拽功能
|
19天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
18 0
|
1月前
|
JavaScript 前端开发 Java
springboot从控制器请求至页面时js失效的解决方法
springboot从控制器请求至页面时js失效的解决方法
15 0
springboot从控制器请求至页面时js失效的解决方法
|
1月前
|
Web App开发 前端开发 JavaScript
编程笔记 html5&css&js 004 我的第一个页面
编程笔记 html5&css&js 004 我的第一个页面
|
2月前
|
JavaScript 前端开发
js制作九宫格抽奖功能
js制作九宫格抽奖功能
21 0
|
1月前
|
JavaScript 前端开发
springboot+layui从控制器请求至页面时js失效的解决方法
springboot+layui从控制器请求至页面时js失效的解决方法
16 0
|
10天前
|
JavaScript 安全 前端开发
|
16天前
|
JavaScript 前端开发
如何用JS实现选项卡功能
如何用JS实现选项卡功能
13 0
|
17天前
|
存储 前端开发 JavaScript
使用JavaScript实现复杂功能——一个交互式音乐播放器
使用JavaScript实现复杂功能——一个交互式音乐播放器