使用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獲取全屏模式到我的瀏覽器

回答

相關問題