[英]HTML5 FullScreen API toggle with JavaScript
我正在尝试制作一个按钮,可以在某个网站上切换(开/关)HTML5 全屏。
在阅读了大量文档后,浏览器对其某些属性的处理方式似乎仍然存在一些不一致之处。
我选择了一种“跨浏览器”方法,它在 Firefox 和 Safari/MacOS 中工作,在 Safari/Windows 中部分工作,在 Chrome 和 Opera 中完全无法工作。
一些阉割的代码片段:
// class init
initialize: function() {
this.elmButtonFullscreen = $('fullscreen');
this.elmButtonFullscreen.on('click', this.onClickFullscreen.bindAsEventListener(this));
},
// helper methods
_launchFullScreen: function(element) {
if(element.requestFullScreen) { element.requestFullScreen(); }
else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); }
else if(element.webkitRequestFullScreen) { element.webkitRequestFullScreen(); }
},
_cancelFullScreen: function() {
if(document.cancelFullScreen) { document.cancelFullScreen(); }
else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); }
else if(document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); }
},
_isFullScreen: function() {
fullScreen = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled ? true : false;
if(this.debug) console.log('Fullscreen enabled? ' + fullScreen);
return fullScreen;
},
// callbacks
onClickFullscreen: function(e) {
e.stop();
if(this._isFullScreen()) this._cancelFullScreen();
else this._launchFullScreen(document.documentElement);
}
function goFullScreen() {
const el = document.documentElement,
rfs = el.requestFullScreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen
|| el.msRequestFullscreen
rfs.call(el)
}
document.querySelector('#full-screen-button')
.addEventListener('click', () => {
goFullScreen()
})
请记住,请求fullScreen
需要通过用户触发的事件来完成,例如单击事件- mousedown
、 mouseup
等。
将_isFullScreen
函数的第一行更改为
fullScreen = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled ? true : false;
有没有用(至少对于 Mac 和 Windows 上的 Firefox、Chrome 和 Safari)
根据我在 Mozilla 的开发人员网络上发现的内容,Webkit 的功能实际上拼写略有不同。
document.webkitRequestFullscreen
用小写的“s”表示屏幕。
从 W3 规范来看,它意味着使用小写的“s”。
在 MDN 链接上,他们说:
注意:规范使用标签“Fullscreen”,如“requestFullscreen”或“fullscreenEnabled”——没有大写的“s”。 此处描述的实现和其他带前缀的实现可能使用大写的“S”。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.