浏览器全屏展示

112 阅读1分钟

一、全屏区分

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 对象。