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

这篇关于js实现全屏(f11)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/210476

相关文章

React 记忆缓存的三种方法实现

《React记忆缓存的三种方法实现》本文主要介绍了React记忆缓存的三种方法实现,包含React.memo、useMemo、useCallback,用于避免不必要的组件重渲染和计算,感兴趣的可以... 目录1. React.memo2. useMemo3. useCallback使用场景与注意事项在 Re

Nginx实现端口映射的示例代码

《Nginx实现端口映射的示例代码》本文主要介绍了Nginx实现端口映射的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录1. 找到nginx的部署路径2. 备份原来的配置文件3. 编辑nginx.conf文件4. 在

Java StringBuilder 实现原理全攻略

《JavaStringBuilder实现原理全攻略》StringBuilder是Java提供的可变字符序列类,位于java.lang包中,专门用于高效处理字符串的拼接和修改操作,本文给大家介绍Ja... 目录一、StringBuilder 基本概述核心特性二、StringBuilder 核心实现2.1 内部

Android实现图片浏览功能的示例详解(附带源码)

《Android实现图片浏览功能的示例详解(附带源码)》在许多应用中,都需要展示图片并支持用户进行浏览,本文主要为大家介绍了如何通过Android实现图片浏览功能,感兴趣的小伙伴可以跟随小编一起学习一... 目录一、项目背景详细介绍二、项目需求详细介绍三、相关技术详细介绍四、实现思路详细介绍五、完整实现代码

SpringBoot AspectJ切面配合自定义注解实现权限校验的示例详解

《SpringBootAspectJ切面配合自定义注解实现权限校验的示例详解》本文章介绍了如何通过创建自定义的权限校验注解,配合AspectJ切面拦截注解实现权限校验,本文结合实例代码给大家介绍的非... 目录1. 创建权限校验注解2. 创建ASPectJ切面拦截注解校验权限3. 用法示例A. 参考文章本文

SpringBoot集成redisson实现延时队列教程

《SpringBoot集成redisson实现延时队列教程》文章介绍了使用Redisson实现延迟队列的完整步骤,包括依赖导入、Redis配置、工具类封装、业务枚举定义、执行器实现、Bean创建、消费... 目录1、先给项目导入Redisson依赖2、配置redis3、创建 RedissonConfig 配

Python的Darts库实现时间序列预测

《Python的Darts库实现时间序列预测》Darts一个集统计、机器学习与深度学习模型于一体的Python时间序列预测库,本文主要介绍了Python的Darts库实现时间序列预测,感兴趣的可以了解... 目录目录一、什么是 Darts?二、安装与基本配置安装 Darts导入基础模块三、时间序列数据结构与

Python使用FastAPI实现大文件分片上传与断点续传功能

《Python使用FastAPI实现大文件分片上传与断点续传功能》大文件直传常遇到超时、网络抖动失败、失败后只能重传的问题,分片上传+断点续传可以把大文件拆成若干小块逐个上传,并在中断后从已完成分片继... 目录一、接口设计二、服务端实现(FastAPI)2.1 运行环境2.2 目录结构建议2.3 serv

C#实现千万数据秒级导入的代码

《C#实现千万数据秒级导入的代码》在实际开发中excel导入很常见,现代社会中很容易遇到大数据处理业务,所以本文我就给大家分享一下千万数据秒级导入怎么实现,文中有详细的代码示例供大家参考,需要的朋友可... 目录前言一、数据存储二、处理逻辑优化前代码处理逻辑优化后的代码总结前言在实际开发中excel导入很

SpringBoot+RustFS 实现文件切片极速上传的实例代码

《SpringBoot+RustFS实现文件切片极速上传的实例代码》本文介绍利用SpringBoot和RustFS构建高性能文件切片上传系统,实现大文件秒传、断点续传和分片上传等功能,具有一定的参考... 目录一、为什么选择 RustFS + SpringBoot?二、环境准备与部署2.1 安装 RustF