web 使網站在瀏覽器中全屏顯示 fullscreen=yes

關於全屏（FullScreen）

　　很久以前，瀏覽器就已經有全屏的概念的了。IE的open方法中可以配置上FullScreen參數來讓打開的頁面全屏化。但是這不太好用，所以沒成爲主流。而且，全屏這東西如果被惡意使用會給用戶造成困擾，所以在現代瀏覽的全屏API中需要在用戶事件中調用。

　　open方法的第三個參數是可以對打開的窗口做一些配置，但是現代瀏覽器並沒有吸收太多的這個部分，包括FullScreen這個配置。所以open的FullScreen依然只能在IE中使用。高版本IE中這個FullScreen也已經被弱化了，所以的全屏也只是最大化窗口而已。

open("index.html",null,"fullscreen=yes");　　

注意它的值是yes或大於0的數字時纔有效。傳統的IE方法並沒有對自身頁面全屏化的接口（ActiveXObject除外），而HTML5的FullScreen API是針對viewport的，所以它可以對當前文檔做全屏化。但是由於安全性的考慮（防止被惡意使用），這個API的調用需要在用戶事件中。只有用戶自己的操作才能觸發，程序無權主動調用。

     var de=document.documentElement;
      //調整兼容性
        de.requestFullScreen=
                de.requestFullScreen||
                        de.webkitRequestFullScreen||
                        de.mozRequestFullScreen;
        //計時器調用（無效）
        setTimeout(function(){
            de.requestFullScreen();
        },1);
       //點擊事件調用（有效）
        de.onclick=function(){
            de.requestFullScreen();
        };

　　

目前這些全屏API還是有前綴的，所以使用起來有點麻煩，將來規範化後去掉前綴使用就會方便一些。對於一些非用戶事件，比如onload、timeout，等之類的事件中調用requestFullScreen是無法生效的。出於安全性考慮必須在用戶事件中調用，比如鼠標、鍵盤，操作。在進入全屏後，不同的瀏覽器會做出不同的提示：

Firefox：

Chrome：

　　雖然全屏是針對viewport的，但是對文檔全屏的方法本身是在body或documentElement上的，具體原因我也沒去詳細瞭解。其它viewport比如CANVAS、VIDEO，之類的也可以發起全屏請求。

　　當然，全屏API當然不只是調用全屏這個一個方法，還有取消和判斷之類的。不過由於目前規範尚未落實，所以其它方法可能還有一些其它的兼容性問題。我這裏就不深入了，懂得用就行。其它具體描述可以看MDN。

　　　　參考：MDN - Using full screen mode