HTML网页实现一键全屏显示效果(F11效果)_html打开直接全屏-程序员宅基地

类似于F11按键得全屏显示相对来讲比较简单。
直接放代码：

<!-- 全屏显示按钮 -->
<li class="toolLi" id="full_screen" style="display: block;">
	<p><img src="./fall_screen.png" alt=""></p>
</li>
<!-- 退出全屏显示按钮 -->
<li class="toolLi" id="exit_screen" style="display: none;">
	<p><img src="./exit_fall_screen.png" alt=""></p>
</li>

分别设置一个进入全屏的按钮何退出全屏的按钮，两个图片不一样。
然后设置点击事件：

function fullScreen(el) {
    
     var rfs = el.requestFullScreen || 
				el.webkitRequestFullScreen || 
				el.mozRequestFullScreen || 
				el.msRequestFullScreen,
         		wscript
     if (typeof rfs != "undefined" && rfs) {
    
         rfs.call(el);
         return;
     }
     if (typeof window.ActiveXObject != "undefined") {
    
         wscript = new ActiveXObject("WScript.Shell");
         if (wscript) {
    
             wscript.SendKeys("{F11}");
         }
     }
 }
 // 定义退出全屏
 function exitFullScreen(el) {
    
     var el = document,
         	cfs = el.cancelFullScreen || 
			el.webkitCancelFullScreen || 
			el.mozCancelFullScreen || 
			el.exitFullScreen, wscript;
     if (typeof cfs != "undefined" && cfs) {
    
         cfs.call(el);
         return;
     }
     if (typeof window.ActiveXObject != "undefined") {
    
         wscript = new ActiveXObject("WScript.Shell");
         if (wscript != null) {
    
             wscript.SendKeys("{F11}");
         }
     }
 }
 // 调用全屏功能
// 点击全屏按钮时，进入全屏，当前按钮变为none，退出全屏按钮变为display
var fullBtn = document.getElementById("full_screen");
var exitBtn = document.getElementById("exit_screen")
var content = document.documentElement
// 全屏显示点击事件
fullBtn.onclick = function () {
    
    fullScreen(content);
	fullBtn.style.display = 'none'
	exitBtn.style.display = 'block'
}
// 退出全屏显示点击事件
exitBtn.onclick = function () {
    
    exitFullScreen();
	fullBtn.style.display = 'block'
	exitBtn.style.display = 'none'
}

参考文章找不到了，但还是感谢提供思路的朋友!！！

本文链接：https://blog.csdn.net/qq_42877959/article/details/124505438

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Caused by: redis.clients.jedis.exceptions.JedisDataException: OOM command not allowed when used memo-程序员宅基地

文章浏览阅读1.1k次。错误日志：Caused by: org.springframework.dao.InvalidDataAccessApiUsageException: OOM command not allowed when used memory > 'maxmemory'.; nested exception is redis.clients.jedis.exceptions.JedisDataException: OOM command not allowed when used memory > '

ubuntu桌面，窗口，终端快捷键+怎么设置快捷键-程序员宅基地

Netty4.x源码分析_netty4源码解析-程序员宅基地

文章浏览阅读201次。1_netty4源码解析

ssh报错：ssh_exchange_identification 与 /var/empty/sshd-程序员宅基地

文章浏览阅读3.5k次。两个错误连接SSH，本地报错ssh_exchange_identification: Connection closed by remote host我用的阿里云，只能登陆阿里云，在控制台用网页连接服务器~~排错： 1、查看sshd的状态， service sshd status，感觉不太对劲，重启一下，起不来。用 journalctl -xe 查一下日志，发现以下报错：...

搬运Pixel Experience [AOSP] 小米8se_小米8se pixelexperience 专用rec-程序员宅基地

文章浏览阅读891次。aosp pixel 网站搬运_小米8se pixelexperience 专用rec

LZW编码的学习与实现-程序员宅基地

文章浏览阅读2.3w次，点赞43次，收藏93次。Preface看了一天，感觉终于搞明白了一点（代码终于写对了），编码过程大四的时候学过一点点，按部就班的按照步骤来做就行了，解码过程貌似课堂上老师没讲，自己看wiki上的讲解和example搞懂了。LZW全称Lempel–Ziv–Welch，就是这个三个人搞出来的。LZW的工作思路，考虑一段数据，abcabcabc，对于这样的一段数据，如果不做任何处理和压缩，假设每个字符用一个字节来表