linux控制台则怎么退出全屏,JS 全屏和退出全屏详解及实例代码_聂俊骁的博客-程序员宅基地

技术标签: linux控制台则怎么退出全屏  

JS 全屏和退出全屏

js实现浏览器窗口全屏和退出全屏的功能,市面上主流浏览器如:谷歌、火狐、360等都是兼容的,不过IE低版本有点瑕疵(全屏状态下仍有底部的状态栏)。

这个demo基本是够了,直接复制下面的源码另存为html文件看效果吧。

js全屏和退出全屏代码

全屏显示

退出全屏

function requestFullScreen(element) {

// 判断各种浏览器,找到正确的方法

var requestMethod = element.requestFullScreen || //W3C

element.webkitRequestFullScreen || //Chrome等

element.mozRequestFullScreen || //FireFox

element.msRequestFullScreen; //IE11

if (requestMethod) {

requestMethod.call(element);

}

else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer

var wscript = new ActiveXObject("WScript.Shell");

if (wscript !== null) {

wscript.SendKeys("{F11}");

}

}

}

//退出全屏 判断浏览器种类

function exitFull() {

// 判断各种浏览器,找到正确的方法

var exitMethod = document.exitFullscreen || //W3C

document.mozCancelFullScreen || //Chrome等

document.webkitExitFullscreen || //FireFox

document.webkitExitFullscreen; //IE11

if (exitMethod) {

exitMethod.call(document);

}

else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer

var wscript = new ActiveXObject("WScript.Shell");

if (wscript !== null) {

wscript.SendKeys("{F11}");

}

}

}

感谢阅读,希望嫩帮助到大家,谢谢大家对本站的支持!

以下是其它网友的补充

我们知道,浏览器全屏通常按快捷键F11。JS控制浏览器全屏也不稀奇,它让Web应用看上去更像似原生软件应用效果。比如点餐系统、叫号系统等等。

JS让浏览器全屏及退出全屏的方法网上很多,这不是重点,重点是需注意:浏览器全屏只能通过鼠标手势点击事件去触发。

JS全屏方法

var $fullScreen = document.getElementById("js-fullScreen");//按钮

if ($fullScreen) {

$fullScreen.addEventListener("click", function () {

var docElm = document.documentElement;

if (docElm.requestFullscreen) {

docElm.requestFullscreen();

}

else if (docElm.msRequestFullscreen) {

docElm.msRequestFullscreen();

}

else if (docElm.mozRequestFullScreen) {

docElm.mozRequestFullScreen();

}

else if (docElm.webkitRequestFullScreen) {

docElm.webkitRequestFullScreen();

}

}, false);

}

JS退出全屏方法

var $cancelFullScreen = document.getElementById("js-cancelFullScreen");

if ($cancelFullScreen) {

$cancelFullScreen.addEventListener("click", function () {

if (document.exitFullscreen) {

document.exitFullscreen();

}

else if (document.msExitFullscreen) {

document.msExitFullscreen();

}

else if (document.mozCancelFullScreen) {

document.mozCancelFullScreen();

}

else if (document.webkitCancelFullScreen) {

document.webkitCancelFullScreen();

}

}, false);

}

控制台警告

Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.

释义:在"Element"上执行"requestFullscreen"方法失败,javascript API仅允许通过手势去创建!(即没有权限)

通常是由于程序员想触发浏览器自动全屏显示而导致。但是很抱歉,此方法行不通,必须通过手势去创建,哪怕onload、trigger()、mouseover也触发不了!

官方解释

该Element.requestFullscreen()方法发出异步请求,使元素全屏显示。但不能保证元素将被放入全屏模式。

如果允许进入全屏模式,文档将收到一个fullscreenchange事件,让它知道它现在处于全屏模式。如果权限被拒绝,则文档会接收到一个fullscreenerror事件。

结论

可能出于用户操作体验的考虑吧,客户端javascript让浏览器全屏只能通过鼠标手势点击事件去触发,即click()。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_29765949/article/details/116972666

智能推荐

【你也能看得懂的电磁场与电磁波系列连载 30】_凝望,划过星空.scut的博客-程序员宅基地

我们在上一个连载详细分析了平面波垂直入射的反射定律和折射定律。不过大家还记得吗,我们当时只是说了介质,并不在意是不是导电媒质还是理想介质,所以我们但是统一用 γγγ 表示。不过我们今天所讨论的是:理想介质到理想导体的垂直入射。那么在理想介质里面,γ=jβγ = jβγ=jβ,波阻抗 η1η_1η1​ 是一个实数。对于理想导体,由于其导电率趋于无穷,所以其波阻抗 η2η_2η2​ 趋于0. 而我们知道,理想导体里面是不能存在电磁波的,所以你从理想介质垂直入射到理想导体里面,注定是射不进去的,(即如果把理

谈一谈我对本科计算机专业的认识_AC_XXZ的博客-程序员宅基地

新的一年开始了,我大学的所有课程也刚刚结束不久,想一写篇文章谈一谈我对计算机专业的认识。博主学的专业是“计算机科学与技术”,今年大四,三年半的校园生活使我对计算机专业的认知一次又一次的改变;由于没有一个好的“引路人”,自己总是摸索着前进,走了不少的弯路。刚上大学的时候对计算机没有什么概念,当时除了会打字以外也不会什么,印象中的计算机专业是编程,是写软件,或者是做些什么PS,网页三剑客,甚至修电脑之

引入腾讯x5内核(未结)_宁_yokin的博客-程序员宅基地

引入腾讯X5内核的with download版本 tbs_sdk_thirdapp_v2.1.2.1096_36511_withdownload_obfs_20160727_105857.jar 很诡异,知道是个暂时的测试版,但是就是诡异,我只是导入了jar包,没有像官方说的那样导入sdk key就可以跑起来了。虽然第一次无法调用系统内核,但是第二次就是x5内核了,我将程序多次卸载重装后第二次都

Message: unknown error: call function result missing 'value'_S.Gerrard的博客-程序员宅基地

python使用selenium进行web自动化测试时报错Message: unknown error: call function result missing 'value'原因:插件chromedriver与chrome浏览器版本不匹配解决方案:参考文章https://blog.csdn.net/huilan_same/article/details/51896672,找到与当前chrome...

常用分类算法_inte_sleeper的博客-程序员宅基地_以下属于分类算法

分类算法通常需要经过两步:训练和分类。如下:训练:训练集——>特征选取——>训练——>分类器分类:新样本——>特征选取——>分类——>判决最初的数据挖掘分类应用大多都是在这些方法及基于内存基础上所构造的算法。目前数据挖掘方法都要求具有基于外存以处理大规模数据集合能力且具有可扩展能力。下面对几种主要的分类方法做个简要介绍:(1)决策树决策树归纳是经典的分类算法。它采用自顶

java swing jlist保存_在Swing Java中将元素添加到JList_weixin_39865866的博客-程序员宅基地

小编典典不要使用,实际上不要Thread.sleep(int)在期间使用EventDispashThread,因为睡眠锁定了当前电流Thread,在这种情况下EventDispashThread,它向GUI输出了异常输出,更多有关Swing的Concurency,如果需要处理,则将Items wrappend添加到中Runneble#Thread,将GUI的输出包装到中invokeLater,或者...

随便推点

[20170419]ora-28547.txt_weixin_34293911的博客-程序员宅基地

[20170419]ora-28547.txt --//测试环境,莫名奇妙使用toad登陆出现如下错误(使用ezconnect方式)。 ORA-28547: connection to server failed, probable Oracle Net admin error $ oerr ora 28547 ...

大唐杯学习笔记(1)---5G网络架构和组网部署_等到烟火.清凉的博客-程序员宅基地_5g组网部署

目录前言一、5G组网架构二、5G接入网组网部署1.组网方式2.网元类型分类部署方式整体架构核心网网元及功能总结前言一、5G组网架构架构定义5GC5G核心网UE终端NG-RAN5G无线接入网二、5G接入网组网部署1.组网方式SA(Standalone)5G独立组网NSA(Non-Standalone)5G非独立组网NSA与SA区别:1.核心不同:NSA新建5G基站,采用4G核心网或新建5G核心网;SA新建5G基站和5G核心

过滤器、拦截器和监听器在javaWeb中应用的区别_马可菠萝me的博客-程序员宅基地

最近在闲暇的时候,发现自己对过滤器和拦截器的应用不是很清楚。因此,对二者的区别仅应用场景做了下对比,在此做笔记以作知识积累。拦截器,顾名思义是用来拦截的。也就是说拦截某一类或一个请求处理,在进行逻辑处理之前和处理之后做出相应的其他动作(附加的操作)。而过滤器是随着应用启动而生效的,所以一般做项目需要统一处理的东西。如请求编码格式设置。另外,在此对与以上二者较为相似的监听器作下说明。

网页跳转java无法_springboot无法跳转页面的问题解决方案_weixin_39573512的博客-程序员宅基地

首先我登录页面直接通过浏览器请求直接访问的,项目结构如图所示登录页面$(function () {$("#but").click(function(){var data = $("#frm").serialize();$.get("index",data);})})点击提交后,是一个ajax发送表单里面的数据,请求地址为index,会去数据库里面查询是否有这个人(后端采用mybatis去数据库查询...

Observer_Seric.的博客-程序员宅基地

Observer的功能 负责把data选项中的属性转换成响应式数据 data中的某个属性也是对象,把该属性转换成响应式数据(例如data中的某个属性为Student对象,也要将Student对象中的属性转换成响应式) 数据变化发送通知 observer.js文件中的基本代码如下:class Observer { constructor(data) { this.walk(data); } walk(data) { //1、判断data是否是对象...

推荐文章

热门文章

相关标签