用Html5 or JS實現點擊一個按鈕達到瀏覽器全屏效果

[摘要：面擊一個按鈕要完成按F11齊屏的後果。正在HTML5中,W3C制訂了閉於齊屏的API，就能夠完成齊屏幕的後果項目中須要將背景掃瞄器的窗心齊屏，也便是我們面擊一個按鈕要完成按F11]

點擊一個按鈕要實現按F11全屏的效果。在HTML5中,W3C制定了關於全屏的API，就可以實現全屏幕的效果

項目中需要將後臺瀏覽器的窗口全屏，也就是我們點擊一個按鈕要實現按F11全屏的效果。在HTML5中,W3C制定了關於全屏的API，就可以實現全屏幕的效果，也可以讓頁面中的圖片，視頻等全屏目前只有Google chrome 15 +, safri5.1+,firfox10+,IE11支持

全屏

var docElm = document.documentElement;

//W3C 

if (docElm.requestFullscreen) { 

  docElm.requestFullscreen(); 

}

//Firefox 

else if (docElm.mozRequestFullScreen) { 

  docElm.mozRequestFullScreen(); 

}

//Chrome等 

else if (docElm.webkitRequestFullScreen) { 

  docElm.webkitRequestFullScreen(); 

}

//IE11

else if (elem.msRequestFullscreen) {

 elem.msRequestFullscreen();

}

退出全屏

 if (document.exitFullscreen) { 
document.exitFullscreen(); 
} 
else if (document.mozCancelFullScreen) { 
document.mozCancelFullScreen(); 
} 
else if (document.webkitCancelFullScreen) { 
document.webkitCancelFullScreen(); 
} 
else if (document.msExitFullscreen) { 
document.msExitFullscreen(); 
}

事件監聽

document.addEventListener("fullscreenchange", function () { 
fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";}, false); 

document.addEventListener("mozfullscreenchange", function () { 
fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";}, false); 

document.addEventListener("webkitfullscreenchange", function () { 
fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";}, false); 
document.addEventListener("msfullscreenchange", function () { 
fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";}, false);

全屏樣式設置

在瀏覽器全屏的使用我們還可以進行樣式設置

html:-moz-full-screen { 
background: red; 
} 

html:-webkit-full-screen { 
background: red; 
} 

html:fullscreen { 
background: red; 
}

在手機等移動設備上，很多內置的瀏覽器會縮放頁面，為了是頁面全屏無縮放，需要在頁面的head部分加如下代碼：
<head>
<meta name="viewport" content="user-scalable=no, width=device-width" />
</head>

附錄

1 一個在線的Demo

http://robnyman.github.io/fullscreen/

2 HTML5全屏API之網絡釣魚

http://www.36ria.com/5807

3 jquery封裝的全屏插件

http://johndyer.name/native-fullscreen-Javascript-api-plus-jquery-plugin/

4 更加詳細的全屏API介紹

4.1 https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

4.2 https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

5 HTML5全屏API在FireFox/Chrome中的顯示差異

http://www.zhangxinxu.com/wordpress/2012/10/html5-full-screen-api-firefox-chrome-difference/

瀏覽器全屏的JS代碼實現

方法一：該方法是從一個網上的效果看到不錯，然後自己就拿來下來實驗了一下，還是比較滿意度，下面直接給出代碼

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>全屏</title>
 
 
<script type="text/javascript">

(function(a, b) {
    "use strict";
    var c = function() {
        var a = [["requestFullscreen", "exitFullscreen", "fullscreenchange", "fullscreen", "fullscreenElement"], ["webkitRequestFullScreen", "webkitCancelFullScreen", "webkitfullscreenchange", "webkitIsFullScreen", "webkitCurrentFullScreenElement"], ["mozRequestFullScreen", "mozCancelFullScreen", "mozfullscreenchange", "mozFullScreen", "mozFullScreenElement"]];
        for (var c = 0,
        d = a.length; c < d; c++) {
            var e = a[c];
            if (e[1] in b) return e
        }
    } ();
    if (!c) return a.screenfull = !1;
    var d = "ALLOW_KEYBOARD_INPUT" in Element,
    e = {
        init: function() {
            return b.addEventListener(c[2],
            function(a) {
                e.isFullscreen = b[c[3]],
                e.element = b[c[4]],
                e.onchange(a)
            }),
            this
        },
        isFullscreen: b[c[3]],
        element: b[c[4]],
        request: function(a) {
            
            a = a || b.documentElement,
            a[c[0]](d && Element.ALLOW_KEYBOARD_INPUT),
            b.isFullscreen || a[c[0]]();
            //alert("dd");
        },
        exit: function() {
            b[c[1]]()
        },
        toggle: function(a) {
            this.isFullscreen ? this.exit() : this.request(a)
        },
        onchange: function() {}
    };
    a.screenfull = e.init()
})(window, document)

</script>

    
    
    </head>
<body>
    <div id="loading" style="margin:10px auto;width:600px">正在加載...</div>
    <div id="theEnd"></div>

<script type="text/javascript">
 
 function ck() {
    screenfull && screenfull.request();
};
 
     // 在這裏寫你的代碼...    
    var loading = document.getElementById('loading');
    loading.style.cursor = 'pointer';
    loading.innerHTML = '點擊開始';
    loading.onclick = ck
    
 </script>
 
</body>
</html>

上面的代碼很簡單，功能主要是在head中的script腳本代碼---並且是經過我格式化後的代碼，在body中的代碼只是去調用。

說明：沒有實驗成功在頁面打開的時候就直接全屏，不知道為什麽必須要綁定到某個對象的onclick事件上來調用？

下面的是最開始未格式化的代碼，應該是壓縮過的

<script type="text/javascript">
(function(a,b){"use strict";var c=function(){var a=[["requestFullscreen","exitFullscreen","fullscreenchange","fullscreen","fullscreenElement"],["webkitRequestFullScreen","webkitCancelFullScreen","webkitfullscreenchange","webkitIsFullScreen","webkitCurrentFullScreenElement"],["mozRequestFullScreen","mozCancelFullScreen","mozfullscreenchange","mozFullScreen","mozFullScreenElement"]];for(var c=0,d=a.length;c<d;c++){var e=a[c];if(e[1]in b)return e}}();if(!c)return a.screenfull=!1;var d="ALLOW_KEYBOARD_INPUT"in Element,e={init:function(){return b.addEventListener(c[2],function(a){e.isFullscreen=b[c[3]],e.element=b[c[4]],e.onchange(a)}),this},isFullscreen:b[c[3]],element:b[c[4]],request:function(a){a=a||b.documentElement,a[c[0]](d&&Element.ALLOW_KEYBOARD_INPUT),b.isFullscreen||a[c[0]]()},exit:function(){b[c[1]]()},toggle:function(a){this.isFullscreen?this.exit():this.request(a)},onchange:function(){}};a.screenfull=e.init()})(window,document)
</script>

具體怎麽用，你就自己斟酌使用

參考出處：http://liumeijun.com/

================================================================================

方法二：

這個方法和方法一很類似，也是我從網上找來的，用來一下效果也還不錯。

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>
<div style="margin:0 auto;height:600px;width:700px;">
<button id="btn">js控制頁面的全屏展示和退出全屏顯示</button>
<div id="content" style="margin:0 auto;height:500px;width:700px; background:#900;" >
<h1 id="h1">js控制頁面的全屏展示和退出全屏顯示</h1>
<button id="btn" onclick="exitFull()">js控制頁面的退出全屏顯示</button>
</div>
</div>
</body>
<script language="JavaScript">

document.getElementById("btn").onclick=function(){
    var elem = document.getElementById("content");
    var h1 = document.getElementById("h1");
    requestFullScreen(elem);// 某個頁面元素
    //requestFullScreen(document.documentElement);// 整個網頁
};

function requestFullScreen(element) {
    // 判斷各種瀏覽器，找到正確的方法
    var requestMethod = element.requestFullScreen || //W3C
    element.webkitRequestFullScreen ||    //Chrome等
    element.mozRequestFullScreen || //FireFox
    element.msRequestFullScreen; //IE11
    if (requestMethod) {
        requestMethod.call(element);
    }
    else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
}

//退出全屏 判斷瀏覽器種類
function exitFull() {
    // 判斷各種瀏覽器，找到正確的方法
    var exitMethod = document.exitFullscreen || //W3C
    document.mozCancelFullScreen ||    //Chrome等
    document.webkitExitFullscreen || //FireFox
    document.webkitExitFullscreen; //IE11
    if (exitMethod) {
        exitMethod.call(document);
    }
    else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
}

</script>
</html>

說明：沒有實驗成功在頁面打開的時候就直接全屏，不知道為什麽必須要綁定到某個對象的onclick事件上來調用？

參考出處：

http://www.jb51.net/article/61940.htm

http://www.jb51.net/article/47038.htm

http://www.2cto.com/kf/201410/346205.html

================================================================================

方法三：這個方法有點牽強，我感覺其實就是指的最大化，你自己可以試試代碼，並且我都做了一些說明

<!DOCTYPE html>
<html>
<HEAD>
<title>實現瀏覽器真正全屏的JS代碼 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script language="javascript">
//ps:這是實現屏幕最大化  方法一
function openwin_max(url){
    var scrWidth=screen.availWidth;
    var scrHeight=screen.availHeight;
    var self=window.open(url,"PowerBOS","resizable=1");
    self.moveTo(-4,-4);
    self.resizeTo(scrWidth+9,scrHeight+9);
}
// ps:這是實現窗口最大化  方法二
function openwin_full(url) {
    var scrWidth=screen.availWidth;
    var scrHeight=screen.availHeight;
    var opt='top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no,fullscreen=1';  
    var self = window.open(url, "aaaa", opt);
    //var self=window.open(url,"PowerBOS","resizable=1");
    self.moveTo(0,0);
    self.resizeTo(scrWidth,scrHeight);
}
</script>

<script>

window.moveTo(0,0);        
window.resizeTo(screen.availWidth,screen.availHeight); 
window.outerWidth=screen.availWidth;        
window.outerHeight=screen.availHeight;    
//這是實現屏幕最大化! 方法三
function fullScreen(){
var opt='top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no';  
//window.open(document.location, 'aaa', 'fullscreen')
window.open(document.location, "aaa", opt);
}

</script>

</head>
<body>

<input type="BUTTON" value=http://www.ithao123.cn/"全屏顯示一" onClick="openwin_max(document.location)">







這個網頁特代碼實現了瀏覽器的最大化完全全屏

關閉方法： 按鍵盤 alt+f4  不過對於火狐瀏覽器不能完全全仍然顯示地址欄和關閉按鈕。 </p>
<p style="font-size:16px; text-indent:2em; font-weight:bold; margin-top:30px;">O(∩_∩)O哈哈~</p>

</body>
</HTML>

網上有很多人說要將第三中方式的方法寫到body的onload事件中可以實現頁面在載人的時候就顯示最大化：如<body onload="fullScreen();">

我測試下來是有點問題的：

①：window.open(document.location, '', 'fullscreen')在該方法的第二個參數如果為空，在body的onload事件中是一個open指定頁面的死循環的調用打開，也就是說會無限制的打開一個新的窗口，你可以自己測試，註意你的任務管理器的性能選項卡中CPU的變化。

②：如果給出window.open方法的第二個參數，例如：window.open(document.location, 'aaa', 'fullscreen')，則在body的onload事件中調用的的時候也是死循環，只是都是同一個頁面窗口而已，你可以自己測試，註意你的任務管理器的性能選項卡中CPU的變化。

以上出現的問題，希望有興趣的朋友自己研究下，並告訴我最好的解決方案

參考出處：

http://blog.sina.com.cn/s/blog_4f8f56850100c0ig.html

http://fluagen.blog.51cto.com/146595/186101

http://www.51xuediannao.com/js/texiao/IEquanping.html

============================================================

Tags: google 瀏覽器 Chrome chrome HTML5

文章來源：

用Html5 or JS實現點擊一個按鈕達到瀏覽器全屏效果

瀏覽器全屏的JS代碼實現

相關文章