JavaScript 控制浏览器全屏展示

前言
一、全屏区分
二、HTML Dom 全屏模式
- 展开全屏
- 退出全屏
三、兼容 IE 10 及以下方式
DEMO
总结

前言

浏览器全屏功能解释

一、全屏区分

1.浏览器有两种全屏模式，第一种为浏览器窗口行为称为 视图全屏，在浏览器工具栏中 缩放 一栏
点击全屏按钮，或者按 F11 键（几乎所有软件都会支持的通用功能）。

2.浏览器 HTML 全屏模式，意思就是使浏览器 HTML Dom 铺满整个屏幕展示的全屏模式。

以上两种，由于安全策略原因，在非低版本 IE 浏览器中，都不支持使用脚本控制。
也就是说只能使用第二种 HTML Dom 控制全屏的方式

两种全屏属于两种模式，并行使用使视觉效果存在一些冲突，Firefox 浏览器比较明显。但并不属于 bug

二、HTML Dom 全屏模式

IE浏览器只兼容 IE11

展开全屏

使用请求全屏的方法 requestFullscreen 实现

var el = document.documentElement;
// 兼容各个浏览器请求全屏方法( el.requestFullscreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen
|| el.msRequestFullscreen).call(el);

使用 call 方法为了把 this 指向回 el

还有上诉方法中，除了前缀不一样，后面的 S 也有大小写区分，千万不要写错

退出全屏

使用退出全屏方法 exitFullscreen

// 兼容各个浏览器退出全屏方法( document.exitFullscreen
|| document.msExitFullscreen
|| document.mozCancelFullScreen
|| document.webkitExitFullscreen).call(document);

使用 call 方法为了把 this 指向回 document

还有上诉方法中，除了前缀不一样，后面的 S 也有大小写区分，千万不要写错

三、兼容 IE 10 及以下方式

使用 ActiveXObject 对象触发 F11 按键

document.documentElement.onclick = function(){var wscript = new ActiveXObject("WScript.Shell");if (wscript!=null) {wscript.SendKeys("{F11}");}
}

此方法对于现在的IE 浏览器默认设置并不支持，也受限于安全影响，想体验一下此方法的童鞋可以 点此处 查看如何修改 IE 配置，允许使用 ActiveXObject 对象。

下面 gif 图演示上面代码效果

DEMO

Demo 下载地址全屏演示Demo 下载

原本是想放一个在线版本的，由于在线工具使用iframe 嵌套
不容易直接实现，有兴趣可以去看看在线代码是怎么样的
想直接尝试效果，下载上面的Demo尝试

总结

为了解释完善，看了一堆资料，下面把看的资料贴出来，有兴趣的童鞋可以点进去瞅瞅。

1.https://stackoverflow.com/questions/1125084/how-to-make-the-window-full-screen-with-javascript-stretching-all-over-the-scre/7525760#7525760

2.https://hacks.mozilla.org/2012/01/using-the-fullscreen-api-in-web-browsers/

3.https://gist.github.com/1710727

JavaScript 控制浏览器全屏展示相关推荐

html 设置浏览器全屏显示,JavaScript控制浏览器全屏显示简单示例
本文实例讲述了JavaScript控制浏览器全屏显示.分享给大家供大家参考,具体如下: www.jb51.net JS全屏显示全屏显示退出全屏 // 判断各种浏览器,找到正确的方法 functio ...
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
项目中做过大屏展示功能,其中需求是需要全屏展示,正好HTML 5中的full screen满足需求,在此记录下. HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ...
html控制浏览器全屏,JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件_javascript技巧...
HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做全屏API,游戏呀,等都很有用.先看常见的API element.requestFullScree ...
设置浏览器全屏展示网站
  <meta name="viewport" content="width ...
使用javascript实现浏览器全屏
HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做全屏API,游戏呀,等都很有用.先看常见的API 1 element.requestFullS ...
js控制浏览器全屏显示
window.navigator.userAgent.indexOf('MSIE')<0为true时,表示浏览器支持进入全屏还需做兼容性判断 <!DOCTYPE html> < ...
js控制浏览器全屏踩坑记录
需求点击以下按钮后,页面进入全屏. 进入全屏后,按钮样式改变为恢复非全屏时,按钮自动恢复. 难点需求很简单,但是实际上手发现有几个难点: 1.浏览器在全屏状态下按F11和Esc可以退出全屏,且全 ...
原声js控制浏览器全屏或者退出全屏
开启全屏 if (document.documentElement.requestFullscreen) {document.documentElement.requestFullscreen(); ...
前端实现控制浏览器全屏显示
通过原生JS方式实现 document.documentElement.requestFullscreen() // 开启全屏 document.exitFullscreen() // 关闭全屏通过 ...

JavaScript 控制浏览器全屏展示

JavaScript 控制浏览器全屏展示

前言

一、全屏区分

二、HTML Dom 全屏模式

展开全屏

退出全屏

三、兼容 IE 10 及以下方式

DEMO

总结

JavaScript 控制浏览器全屏展示相关推荐

最新文章

热门文章

JavaScript 控制浏览器全屏展示

JavaScript 控制浏览器全屏展示

前言

一、全屏区分

二、HTML Dom 全屏模式

展开全屏

退出全屏

三、兼容 IE 10 及 以下方式

DEMO

总结

JavaScript 控制浏览器全屏展示相关推荐

最新文章

热门文章

三、兼容 IE 10 及以下方式