javascript full screen 全螢幕顯示頁面元素的方法_javascript技巧

WBOY

發布： 2016-05-16 17:21:15

原創

1964 人瀏覽過

一種最簡單的方式，就是動態改變你想要全螢幕顯示的部件的style，例如position變成absolute，height和width都設定成視窗大小，並且把背景顏色改成全白（為了遮住頁面上其餘的元素）。這樣網頁上就只能看到你要突出的部件了，視覺上就等於全螢幕。同時利用javascript監聽鍵盤事件，一旦使用者按了ESc退出鍵，就恢復原來的樣子。部分程式碼如下：

複製程式碼程式碼如下:

document.onkeydown = function ( var e = event || window.event || arguments.callee.caller.arguments[0];
        if (e && e.keyCode == 27) { //ESC .navbar-inner').fadeIn(100);
           var maintable = document.getElementById("holder");            maintable.style.width = "100%";
             maintable.style.height = "100%";
            maintable .style.width = "100%";
            maintable.style.left = 0 "px";
           resizePlots();
        }
    };

fullScreenClick: function () {

$('.navbar-inner').fadeOut(100);

var maintable = document.getElementById("holder");maintable.style.position = "absolute";

maintable.style.background = "#fff";
//maintable.style .zIndex = 5;

maintable.style.height = $(window).height() "px";

maintable.style.width = $(window).width() "px";

maintable.style.left = 0 "px";

maintable.style.top = 0 "px";
maintable = document.getElementById("main");
maintable.style.height = "90 %";
maintable.style.width = "90%";
maintable.style.left = $(window).width() * 0.05 "px";
maintable.style.top = $ (window).height() * 0.02 "px";
resizePlots();
},

但是這樣做有個缺點，就是還需要手工按一下F11來達到真正的全螢幕。

下面有個方法不用自己按F11的：

複製程式碼

代碼如下:

🎜>

歡迎微博互粉！

weibo.com/leavingseason

相信音樂，相信五月天

function requestFullScreen(element) {

    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullullS ||
    if (requestMethod) {
        requestMethod.call(element);

} else if (type. XObject("WScript.Shell ");

if (wscript !== null) {
wscript.Send1(" 🎜>

這個可以支援大部分的瀏覽器。但討厭的IE還是不能支援HTML5的全螢幕功能，需要模擬按F11這個動作。讀者可以在程式碼中看到。

還可以在程式碼裡面退出全螢幕介面：

複製程式碼程式碼如下:

function cancelFullScreen( el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen;
              requestMethod.call(el);
            } else if ( typeof window.ActiveXObject !== "undefined") { // Older IE.
                var wscript = new  wscript !== null) {
                    wscript. SendKeys("{F11}");
                }
         ，我還是很好奇，那麼影片網站是如何做到對IE等瀏覽器都相容的全螢幕功能的。如果有誰知道的話，也請分享一下，感激不盡。 


 updated (2013/09/22)


很多時候，想在全螢幕切換的時候做一些自訂的事情。可以如下綁定事件：

複製程式碼

程式碼如下:

document.addEventListener("fullscreenchange doit();}, false);document.addEventListener("mozfullscreenchange", function () {

document.addEventListener("webkitfullscreenchange", function () {
    doit();
}, false);


它會在每次進入或全螢幕的時候，觸發doit（）操作。 