js实现全屏（f11）

2023-10-14 12:20

文章标签 实现 js 全屏 f11

本文主要是介绍js实现全屏（f11），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

js实现浏览器全屏

当页面自动触发全屏会报错，并且浏览器会给一个警告如下，意思是浏览器全屏API只能由用户手势触发。尝试过window.onload、定时器、鼠标移动事件都不能实现全屏，点击事件可以。
全屏api文档地址：https://developer.mozilla.org/zh-CN/docs/Web/API/Fullscreen_API

简单实现点击全屏代码：

<body><button onclick="fullScreen()">浏览器全屏</button>
</body>
<script type="text/javascript">//实现全屏function fullScreen() {// documentElement 属性以一个元素对象返回一个文档的文档元素var el = document.documentElement;el.requestFullscreen||el.mozRequestFullScreen||el.webkitRequestFullscreen||el.msRequestFullScreen?el.requestFullscreen()||el.mozRequestFullScreen()|| el.webkitRequestFullscreen()||el.msRequestFullscreen():null;}</script>

谷歌、火狐、Edg、360极速模式都可以实现全屏，360兼容模式不生效

window.open实现浏览器工具栏等的隐藏

效果如下：
在这里插入图片描述
代码如下：

window.open ('newHtml.html','_blank',
'width='+(window.screen.availWidth)+',height='+(window.screen.availHeight)+
',top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=yes,location=no, status=no')

window.open定义和用法

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。

语法

window.open(URL,name,specs,replace*)

参数说明

URL
可选。打开指定的页面的URL。如果没有指定URL，打开一个新的空白窗口。
name
可选。指定target属性或窗口的名称。支持以下值：
_blank 加载到一个新的窗口，这是默认
_parent加载到父框架
_self替换当前页面
_top 替换任何可加载的框架集
*name* 窗口名称
specs
channelmode=yes\|no\|1\|0是否要在影院模式显示 window，默认是没有的，仅限IE浏览器directories=yes\|no\|1\|0是否添加目录按钮，默认是肯定的，仅限IE浏览器
fullscreen=yes\|no\|1\|0浏览器是否显示全屏模式，默认是没有的，在全屏模式下的 window，还必须在影院模式，仅限IE浏览器
height=pixels窗口的高度，最小值为100
left=pixels该窗口的左侧位置
location=yes\|no\|1\|0是否显示地址字段，默认值是yes
menubar=yes\|no\|1\|0是否显示菜单栏，默认值是yes
resizable=yes\|no\|1\|0是否可调整窗口大小，默认值是yes
scrollbars=yes\|no\|1\|0是否显示滚动条，默认值是yes
status=yes\|no\|1\|0是否要添加一个状态栏，默认值是yes
titlebar=yes\|no\|1\|0是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框，默认值是yes
toolbar=yes\|no\|1\|0是否显示浏览器工具栏，默认值是yes
top=pixels窗口顶部的位置，仅限IE浏览器
width=pixels窗口的宽度，最小值为100