快捷導(dǎo)航

javascript full screen 全屏顯示頁(yè)面元素的方法

更新時(shí)間：2013年09月27日 15:52:22 投稿：shangke

要想讓頁(yè)面的某個(gè)元素全屏顯示，就像在網(wǎng)頁(yè)上看視頻的時(shí)候，可以全屏觀看一樣，該怎么實(shí)現(xiàn)呢

一種最簡(jiǎn)單的方式，就是動(dòng)態(tài)改變你想要全屏顯示的部件的style，例如position變成absolute，height和width都設(shè)置成窗口大小，并且把背景顏色改成全白（為了遮住頁(yè)面上其余的元素）。這樣網(wǎng)頁(yè)上就只能看到你要突出的部件了，視覺上就等同于全屏。同時(shí)利用javascript鍵盤事件，一旦用戶按了ESc退出鍵，就恢復(fù)原來的樣子。部分代碼如下：

復(fù)制代碼代碼如下:

document.onkeydown = function (event) {
        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.position = "relative";
            maintable.style.height = "100%";
            maintable.style.width = "100%";
            maintable = document.getElementById("main");
            maintable.style.height = "100%";
            maintable.style.width = "100%";
            maintable.style.left = 0 + "px";
            maintable.style.top = 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();
},

但是這樣做有個(gè)缺點(diǎn)，就是還需要手工按一下F11來達(dá)到真正的全屏。

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

復(fù)制代碼代碼如下:

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body >

<button id="btn" > full screen </button>

<div id="content" style="height:500px;width:500px;background:#fff">
<h1>歡迎微博互粉！</h1>
<h2>weibo.com/leavingseason</h2>
<p>相信音樂</p>
</div>

</body>

function requestFullScreen(element) {

var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;

    if (requestMethod) {
        requestMethod.call(element);
    } else if (typeof window.ActiveXObject !== "undefined") {
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
}

</script>
</html>

這個(gè)可以支持大部分的瀏覽器。但是討厭的IE還是不能支持HTML5的全屏功能，需要模擬按F11這個(gè)動(dòng)作。讀者可以在代碼中看到。

還可以在代碼里面退出全屏界面：

復(fù)制代碼代碼如下:

function cancelFullScreen(el) {
            var requestMethod = el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen;
            if (requestMethod) { // cancel full screen.
                requestMethod.call(el);
            } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript !== null) {
                    wscript.SendKeys("{F11}");
                }
            }
        }

關(guān)于全屏顯示，我還是很好奇，那么視頻網(wǎng)站是如何做到對(duì)IE等瀏覽器都兼容的全屏功能的。如果有誰(shuí)知道的話，還請(qǐng)分享一下，感激不盡。

updated (2013/09/22)

很多時(shí)候，想在全屏切換的時(shí)候做一些自定義的事情。可以如下綁定事件：

復(fù)制代碼代碼如下:

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

它會(huì)在每次進(jìn)入或者退出全屏的時(shí)候，觸發(fā)doit（）操作。