退出全屏html,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}");

}

退出全屏html,js全屏和退出全屏代码范例相关推荐

前端js使浏览器窗口全屏与退出----浏览器全屏时监测通过esc按键退出全屏（退出全屏时有页面上的相关处理）
vue项目项目分为顶部导航.侧边导航.以及右边mainContent区域需求是让项目的其中一个页面有全屏功能并且在全屏时隐藏掉顶部的顶导航栏实现: 1.在state里定义一个全局 ...
js 进入浏览器全屏（F11效果）、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式（全屏伪类）
各部分功能代码详见注释: <template><div><button v-if="!ifFullScreen" @click="fullS ...
js实现浏览器全屏与退出全屏，解决chrome下F11进入全屏后退出全屏API方法失效
1. 问题说明网页全屏和退出全屏其实已经算的上一个很常见的功能了,那是不是直接用HTML5全屏API就没什么问题了,但是不要忘了键盘上的F11有着同样的功能,实际使用的时候就发现F11使网页进入全屏 ...
html 全屏显示某个区域,JS实现指定区域的全屏显示功能示例
本文实例讲述了JS实现指定区域的全屏显示功能.分享给大家供大家参考,具体如下: www.jb51.net js指定区域全屏 #fulldiv { background: #fff; width: 10 ...
纯JS解决内嵌iframe全屏（兼容IE/火狐/谷歌）
遇到一些政府/国企开发时经常遇到兼容IE的问题,给大家介绍一种我刚研究出的一种解决方案 1.代码 <!DOCTYPE html> <html lang="en"& ...
自动打开html网页脚本,开启网页全屏插件(自动开启网页全屏脚本js插件)
开启网页全屏插件(自动开启网页全屏脚本js插件)是由作者陈鹏杰分享的一个浏览器扩展插件.通过本脚本,用户在网页加载完4秒后,启动网页全屏.非常简单方便快捷! 脚本描述: 在以下网页开启网页全屏 b 站 ...
html全屏遮罩层,js遮罩层穿透怎么用JS弄遮罩层？全屏，有透明
也可直接点"搜索资料"搜索整个问题. 遮罩层 js 事件穿透搜索资料本地图片图片链接代码提交回答匿名回答自动保存中 html中的frameset,假如有上中下三个f ...
Teamviewer连接服务器显示不能够全屏或向日葵连接服务器不能够全屏或 Teamviewer只显示一个640x480的分辨率选项
欢迎大家关注笔者,你的关注是我持续更博的最大动力原创文章,转载告知,盗版必究 Teamviewer连接服务器显示不能够全屏或向日葵连接服务器不能够全屏或 Teamviewer只显示一个640x ...
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
隐藏水滴屏的软件_屏下摄像头，实现这一全面屏终极方案有多难？
为了实现真正全面屏,手机厂商们到底能有多拼? 在奔向全面屏的征途里,导航键.听筒.传感器.指纹识别模组等都被成功解决,隐藏在边框或屏幕底.唯独前置摄像头,成为全面屏征途的最后一块终极障碍. 这场由iP ...

退出全屏html,js全屏和退出全屏代码范例

退出全屏html,js全屏和退出全屏代码范例相关推荐

最新文章

热门文章