使用jQuery获取全屏模式到我的浏览器

<!DOCTYPE html> 

<html> 

<head> 
    <title>Full Screen Test</title> 
</head> 

<body id="body"> 
    <h1>test</h1> 

    <script> 
    var elem = document.getElementById("body"); 

    elem.onclick = function() { 
     req = elem.requestFullScreen || elem.webkitRequestFullScreen || elem.mozRequestFullScreen; 
     req.call(elem); 
    } 
    </script> 
</body> 

</html>

有一点需要特别注意，用户只能在用户执行操作（例如点击）时请求全屏模式。如果没有用户操作，则无法请求全屏模式。^[1]（例如，在页面加载时）。

这里是一个跨浏览器功能来切换全屏模式（as obtained from the MDN）：

function toggleFullScreen() { 
    if (!document.fullscreenElement && // alternative standard method 
     !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) { // current working methods 
    if (document.documentElement.requestFullscreen) { 
     document.documentElement.requestFullscreen(); 
    } else if (document.documentElement.msRequestFullscreen) { 
     document.documentElement.msRequestFullscreen(); 
    } else if (document.documentElement.mozRequestFullScreen) { 
     document.documentElement.mozRequestFullScreen(); 
    } else if (document.documentElement.webkitRequestFullscreen) { 
     document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); 
    } 
    } else { 
    if (document.exitFullscreen) { 
     document.exitFullscreen(); 
    } else if (document.msExitFullscreen) { 
     document.msExitFullscreen(); 
    } else if (document.mozCancelFullScreen) { 
     document.mozCancelFullScreen(); 
    } else if (document.webkitExitFullscreen) { 
     document.webkitExitFullscreen(); 
    } 
    } 
}

有关详细信息，请参阅MDN page on full screen APIs。

来源

2012-11-09 06:48:36 Dinesh

是否有任何理由不使用像'req = elem.requestFullScreen || elem.webkitRequestFullScreen || elem.mozRequestFullScreen;'得到支持的函数，但用'else if'来代替？ –

@MaxYari当将'document.documentElement.webkitRequestFullscreen'存储在一个变量'x'中，然后使用'x（）'或'x.call（）'时，Chrome至少会抛出一个“非法调用”异常。 – randombumper

@randombumper确定thx澄清 –

新的HTML5技术 - 全屏API为我们提供了一种简单的方式呈现在全屏模式下的网页内容。我们即将向您提供有关全屏模式的详细信息。试着想象一下使用这项技术可能获得的所有优势 - 全屏相册，视频甚至游戏。

但在此之前，我们描述了这种新技术，我必须注意，这技术是实验性的，所有主要的浏览器支持。

你可以找到完整的教程在这里：http://www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/

这里正在演示：http://demo.web3designs.com/javascript-jquery-fullscreen-browser-window-html5-technology.htm

来源

2015-02-18 16:41:19 Dhiraj

-3

如果有一个按钮或其他任何东西，我们可以使用这个脚本：

<script language="JavaScript"> 
function fullScreen() { 
    var el = document.documentElement 
     , rfs = // for newer Webkit and Firefox 
       el.requestFullScreen 
      || el.webkitRequestFullScreen 
      || el.mozRequestFullScreen 
      || el.msRequestFullScreen 
    ; 
    if (typeof rfs != "undefined" && rfs) { 
     rfs.call(el); 
    } else if (typeof window.ActiveXObject != "undefined") { 
     // for Internet Explorer 
     var wscript = new ActiveXObject("WScript.Shell"); 
     if (wscript != null) { 
      wscript.SendKeys("{F11}"); 
     } 
    } 

} 
// End -->

用一个按钮。一切都很简单<a href="javascript:void(0);" onclick="fullScreen();"><BUTTON></a>
但我怎样才能加载页面加载该脚本。这意味着webform将在页面加载时全屏，而不会点击任何内容。

来源

2015-07-30 07:01:13

如果您需要支持IE11（IE8-10）之前的IE版本的插件，请查看jQuery.fullscreen。 IE直到IE11才原生支持该功能。

来源

2015-09-15 14:45:13 Scott

如果你需要jQuery来得到缓解要素选择的，那么你可以这样做：

var viewer = $("#parentid .classname .childelement")[0]; 
var rFS = viewer.mozRequestFullScreen || viewer.webkitRequestFullscreen || viewer.requestFullscreen; 
    rFS.call(viewer);

来源

2016-12-01 11:18:20 frazras

请尝试以下代码

var el = document.documentElement, 
    rfs = el.requestFullscreen 
    || el.webkitRequestFullScreen 
    || el.mozRequestFullScreen 
    || el.msRequestFullscreen 
; 

rfs.call(el);

来源

2018-01-30 12:06:45

您的答案中是否有新内容，或者您是否从其他答案中复制了内容？ –

使用jQuery获取全屏模式到我的浏览器

回答

相关问题