切換全屏模式退出

我有以下的javascript由一個按鈕在我的HTML觸發：切換全屏模式退出

function toggleFullScreen(){ 

    if(v.requestFullScreen){ 
     v.requestFullScreen(); 
    } 
    else if(v.webkitRequestFullScreen){ 
     v.webkitRequestFullScreen(); 
    } 
    else if(v.mozRequestFullScreen){ 
     v.mozRequestFullScreen(); 
    } 
}

如何延長這個JS代碼納入能力退出全屏？這有什麼最佳做法？

來源

2014-01-22 cwiggo

實際上有上MDN一個功能齊全的例子： https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode#Toggling_fullscreen_mode

報價：

切換全屏模式

當用戶點擊回車鍵此代碼調用，如見上面。
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(); 
    } 
    } 
} 
這開始通過看fullscreenElement的值在文檔屬性（檢查它與兩個MOZ，MS，和WebKit前綴）。如果它爲空，文檔當前處於窗口模式，所以我們需要切換到全屏模式。切換到全屏模式由調用element.mozRequestFullScreen（）msRequestFullscreen（）或 webkitRequestFullscreen（），具體取決於哪一個可用。

如果全屏模式已經被激活（fullscreenElement爲非null），我們稱之爲document.mozCancelFullScreen（），msExitFullscreen或 webkitExitFullscreen（），同樣取決於哪種瀏覽器正在使用中。

來源

2014-01-22 11:09:48 gpgekko

就是要發佈這個代碼，精彩的資源，感謝你的迅速！將在2分鐘內接受，名譽++ :) – cwiggo

你有嘗試過嗎？

exitFullscreen(); 
mozCancelFullScreen(); 
webkitExitFullscreen(); 
msExitFullscreen();

看有：

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

或：

http://blog.pearce.org.nz/2011/11/firefoxs-html-full-screen-api-enabled.html

是對你這還不夠有幫助嗎？

來源

2014-01-22 11:00:56 Makromat

我怎樣才能adapat這些功能，我的代碼？我一直在嘗試最後一小時:) – cwiggo

感謝您的及時回覆，我已經檢索了所需的功能！ – cwiggo

沒問題:)你能用厚厚的標記我的答案嗎？非常感謝 – Makromat

從獲取的jQuery：http://jquery.com/download/
從獲取screenfull.min.js： https://github.com/sindresorhus/screenfull.js/
包括他們在<head>...</head>
分配一個ID，<body>前。 mainBody

將函數放置在閉體標籤之前。 </body>

<script src="js/jquery.js"></script> 
<script src="js/screenfull.min.js"></script> 
</head> 

<body id="mainBody"> 
<!--[whatever]--> 
<script> 
      $(function tScreen() 
      { 
       if(!screenfull.enabled) 
       { return false; } 
       screenfull.request(document.getElementById('mainBody')); 
      }); 

      $('#toggle').click(function() 
      { screenfull.toggle($('#mainBody')[0]);}); 
     </script> 
</body> 
</html>

來源

2014-01-22 16:50:17 zer00ne

切換全屏模式退出

回答

相關問題