在最近的浏览器中将整个窗口设置为全屏 [英] Setting the whole window to be fullscreen in recent browsers

问题描述

我想允许用户单击链接，以使用浏览器正在部署的RequestFullScreen函数将我的网页完全显示为全屏.您可以在此处页面查看.根据建议的此处，我正在调用document.documentElement的requestFullScreen方法.代码如下:

I wanted to allow users to click a link to make my webpage entirely full screen, using the RequestFullScreen function that browsers are deploying. You can see the page here. As suggested here, I'm calling requestFullScreen method of document.documentElement. The code looks like this:

var el = document.documentElement
    , rfs = el.requestFullScreen
         || el.webkitRequestFullScreen
         || el.mozRequestFullScreen
         || el.msRequestFullScreen
;
if(typeof rfs!="undefined" && rfs){
  rfs.call(el);
}

问题是，这样做的确很奇怪，在我的情况下，背景大部分是黑色的(您可以查看是否单击链接).难道我做错了什么?在我测试过的所有浏览器中，在浏览器中手动设置全屏功能都可以正常工作，这使我认为documentElement可能在某种程度上还不够全面.

The thing is, I get really strange artifacts doing this, in my case the background is mostly black (you can see if you click the link). Am I doing something wrong? Manually setting fullscreen in the browser works just fine in all the browsers I've tested, which made me think maybe documentElement is somehow not inclusive enough.

document.documentElement.mozRequestFullScreen似乎与用户手动设置全屏功能不同.有什么不同?为什么这种差异会引起问题?

it seems like document.documentElement.mozRequestFullScreen doesn't do the same thing as the user manually setting fullscreen. What's the difference? Why is this difference causing problems?

推荐答案

使用此功能完成此操作.

Got this done with this function.

// Launch full screen
function launchFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

全文

这篇关于在最近的浏览器中将整个窗口设置为全屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！