前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >PC页面全屏显示以及退出全屏显示

PC页面全屏显示以及退出全屏显示

作者头像
用户1174387
发布于 2021-10-26 06:48:26
发布于 2021-10-26 06:48:26
5.6K00
代码可运行
举报
文章被收录于专栏:web开发web开发
运行总次数:0
代码可运行
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//点击,进入全屏
$('#btn4').click(()=>{
      let el = document.documentElement;
      let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen; 
      if(typeof rfs != 'undefined' && rfs){
        rfs.call(el)
      }else if(typeof window.ActiveXObject != 'undefined'){
        let wscript = new ActiveXObject('WScript.Shell');
        if(wscript != null){
          wscript.SendKeys('{F11}')
        }
      }
    })

//点击,退出全屏
    $('#btn5').click(()=>{
      let exitFn = document.exitFullscreen || document.mozCancelFullScreen || document.webkitExitFullScreen || document.webkitCancelFullScreen;
      if(exitFn){
        exitFn.call(document);
      }else if(typeof window.ActiveXObject != 'undefined'){
        let wscript = new ActiveXObject('WScript.Shell');
        if(wscript != null){
          wscript.SendKeys('{F11}');
        }
      }
    })
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-10-22 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
浏览器模拟F11
var fullindex=1; function fullscreen(){  if ($.browser.msie && $.browser.version.indexOf("8") == 0) {   if(typeof window.ActiveXObject != "undefined") {      //for IE8,这里和fullScreen相同,模拟按下F11键退出全屏         var wscript = new ActiveXObject("WScript.Shell");          if(wscript != null) {          wscript.SendKeys("{F11}");          }    }  }else if(parseInt(fullindex)==1){   var docElm = document.documentElement;           //W3C           if (docElm.requestFullscreen) {              docElm.requestFullscreen();          }              //FireFox           else if (docElm.mozRequestFullScreen) {              docElm.mozRequestFullScreen();          }              //Chrome等           else if (docElm.webkitRequestFullScreen) {              docElm.webkitRequestFullScreen();          }              //IE11           else if (docElm.msRequestFullscreen) {           docElm.msRequestFullscreen();          }   fullindex=0;  }else if(parseInt(fullindex)==0){   if (document.exitFullscreen) {              document.exitFullscreen();          }          else if (document.mozCancelFullScreen) {              document.mozCancelFullScreen(); 
Dlimeng
2023/06/28
2270
分享 8 个比较实用的代码片段
几乎所有的网站都有存在,因为它可以让用户更方便地使用功能。但令人难以置信的是,只需要 6 行有效代码就可以做到这一点。
前端达人
2023/02/17
3380
分享 8 个比较实用的代码片段
前端技巧——js篇
复制操作 copy () { let url = this.code; let oInput = document.createElement('input'); oInput.value = url; document.body.appendChild(oInput); oInput.select(); // 选择对象 console.log(oINput.value); document.execCommand('Cooy'); // 执行浏览器复制命令 alert
流眸
2019/08/12
2.1K0
JS控制全屏,监听退出全屏事件
实现方案 //进入全屏 function requestFullScreen(de) { if(de.requestFullscreen){ //W3C de.requestFullscreen(); }else if (de.mozRequestFullScreen){ //FIREFOX de.mozRequestFullScreen(); }else if (de.webkitRequestFullScreen){
Yiiven
2022/12/15
12.1K0
简化你的工作,7 种常用的 JS 代码片段
日常开发中,我们经常会用到很多通用的 JS 代码,比如:复制内容、从 URL 中获取指定参数 等
老K博客
2024/05/28
1030
H5(drag,百度地图使用,requestFullscreen,H5应用缓存)
1.拖拽元素 <script type="text/javascript"> /*有拖拽属性,就有属性对应的拖拽事件*/ //拖拽开始 var box = document.querySelector('.box'); box.ondragstart = function(){ console.log('拖拽开始了') } //拖拽结束 box.ondragend=function(){ console.log('拖拽
天天_哥
2018/09/29
2K0
这些JS工具函数够你用到2020年底了
const name = (n, arr1)=>{ let num = Number(n); for (let i = 0; i < arr1.length; i++) { const element = arr1[i]; if (element != num) { rr.push(num–); } } return rr.find((el) => { let newel = String(el); return arr1.includes(newel); })}
马克社区
2022/06/28
2090
Hexo -21- iframe 增加全屏显示按钮
在 Hexo 网页中经常会用到 iframe 模块插入想要显示的内容,由于主题限制,内容只能在博客内容区显示。本文记录为iframe 增加全屏按钮的方法。 方案思路 确定 iframe 块的 id 使用 JavaScript 控制该 id 的全屏行为 设置按钮控制开关 解决方案 js 代码 <script> /** * 进入全屏 * @param element */ function requestFullScreen(element) { v
为为为什么
2022/08/04
1.3K0
Hexo -21- iframe 增加全屏显示按钮
js触发全屏事件
让用户端JS触发指的就是让用JS监听用户的操作事件,通过JS程序去实现F11全屏。这个事件可以是一个按钮的点击事件,当然也可以是键盘事件,比如用户按下F11。     1.F11键盘事件触发   当用户按下F11事件,浏览器为触发自身全屏功能,这个过程我们一般是不可控制的,即使是监听了F11的键盘事件,退出全屏的时候,我们也捕捉不到退出全屏触发的事件。所以,我们就用程序自己去实现F11的功能,首先需要禁用浏览器默认的事件动作。
山河木马
2019/03/05
16.8K0
JavaScript网页全屏API
在大多数的浏览器中都有实现网页全屏显示的功能,并且大部分浏览器实现全屏显示和退出全屏显示的快捷键通常是F11和Esc两个按键。如今,W3C已经制定了关于网页全屏显示的API,利用这个API 可以实现网页的全屏显示,并且还能将某个特定的元素设置为全屏显示,在各浏览器的兼容性:google chrome 15 +, safri5.1+,firfox10+,IE11都已经开始支持全屏API。
用户6167509
2019/09/04
3.1K1
【JS】1890- 20 个 JS 工具函数助力高效开发
日常开发中,面对各种不同的需求,我们经常会用到以前开发过的一些工具函数,把这些工具函数收集起来,将大大提高我们的开发效率。
pingan8787
2023/12/13
2320
【JS】1890- 20 个 JS 工具函数助力高效开发
大屏开发你需要知道哪些
其实个人认为没必要做高度适配、都根据宽度vw达到一个界面适配就好了,主要是因为做高度适配得话使用vh,再小点得屏幕上 很容易就发生文本重叠、界面不美观、因为文字大小再浏览器最小是12px嘛。
每周聚焦
2023/03/22
9130
36个工作中常用的JavaScript函数片段
文章同步持续更新,往期文章收录在https://github.com/Wscats/art...
wscats
2022/05/05
5080
JS 对指定iframe 全屏操作
最近在搞页面全屏踩到一个坑 。。 首先要知道如果直接在iframe 页面调用requestFullScreen()是没有效果的,需要在当前iframe 的parent 页面调用,其实iframe的 DIV 也是这个原因。具体代码实现如下 function fullScreen(iframeId) { /* 获取父类的document */ var parentDoc = parent.document; /* 定义一个接收元素的变量 */ var thisIframe = n
冷冷
2018/02/08
8.8K0
在FineReport中使用JS实现点击决策报表实现全屏效果
声明:本文实现的内容大部分取自“FineReport 9.0文档”,为防止原文丢失从而个人留存备份,原文链接:https://help.finereport.com/finereport9.0/doc-view-2372.html#7
月落星河Tsukistar
2022/04/02
3.7K0
在FineReport中使用JS实现点击决策报表实现全屏效果
分享20 个你应该了解的JS 编码技术
这些技巧你都知道吗?删除cookie、格式化money、获取url的查询参数……这些JavaScript技巧可以大大提高我们的工作效率。
前端达人
2023/08/31
2010
分享20 个你应该了解的JS 编码技术
从零开始学 Web 之 HTML5(三)网络监听,全屏,文件读取,地理定位接口,应用程序缓存
于是就变成了 webkitRequestFullScreen(), mozRequestFullScreen(), msRequestFullScreen()。由于使用的方法不同,所以要做兼容性处理。
Daotin
2018/08/31
9120
从零开始学 Web 之 HTML5(三)网络监听,全屏,文件读取,地理定位接口,应用程序缓存
HTML5--浏览器全屏操作、退出全屏、是否全屏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <img src="../images/l1.jpg" alt=""> <input type="button" id="full" value="全屏"> <input type="button" id="cancelFull" value="退出全屏">
eadela
2019/09/29
5.5K0
JavaScript实现全屏和退出全屏功能
转载本站文章《JavaScript实现全屏和退出全屏功能》, 请注明出处:https://www.zhoulujun.cn/html/webfront/SGML/html5/2016_0616_8229.html
周陆军博客
2023/05/07
3.5K0
JS 实现全屏和退出全屏
在 Web 开发中,全屏模式可以提供更沉浸式的体验,特别适用于视频播放、游戏展示和演示等场景。通过 JavaScript 的 Fullscreen API,我们可以以编程方式控制元素的全屏状态。
Cell
2023/09/16
4.5K0
推荐阅读
相关推荐
浏览器模拟F11
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验