使用JavaScript切換HTML5 FullScreen API

我正在嘗試製作一個按鈕，可以在特定網站上切換（開啓/關閉）HTML5全屏模式。使用JavaScript切換HTML5 FullScreen API

閱讀大量文檔後，看起來瀏覽器在處理某些屬性時仍然存在一些不一致之處。

我去過一種「跨瀏覽器」的方法，其中在Firefox和Safari/MacOS中工作，部分在Safari/Windows中工作，並完全無法在Chrome和Opera中工作。

一些閹割的代碼片段：

// class init 
initialize: function() { 

    this.elmButtonFullscreen = $('fullscreen'); 
    this.elmButtonFullscreen.on('click', this.onClickFullscreen.bindAsEventListener(this)); 
}, 

// helper methods 
_launchFullScreen: function(element) { 

    if(element.requestFullScreen) { element.requestFullScreen(); } 
    else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); } 
    else if(element.webkitRequestFullScreen) { element.webkitRequestFullScreen(); } 
}, 
_cancelFullScreen: function() { 

    if(document.cancelFullScreen) { document.cancelFullScreen(); } 
    else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); } 
    else if(document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } 
}, 
_isFullScreen: function() { 

    fullScreen = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled ? true : false; 
    if(this.debug) console.log('Fullscreen enabled? ' + fullScreen); 
    return fullScreen; 
}, 

// callbacks 
onClickFullscreen: function(e) { 

    e.stop(); 
    if(this._isFullScreen()) this._cancelFullScreen(); 
    else this._launchFullScreen(document.documentElement); 
}

來源

2013-05-04 kyeno

改變_isFullScreen功能的1號線到

fullScreen = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitIsFullScreen ? true : false;

的伎倆（至少在火狐，Chrome和Safari在Mac和Windows）

來源

2013-05-04 07:55:12 kyeno

至少在FF24中，它是mozFullScreenEnabled（屏幕大寫s） – Narretz 2013-10-15 09:09:46

也不是，如果瀏覽器能夠顯示，則_isFullScreen會返回全屏，如果全屏當前處於活動狀態則不行。您需要監聽document.fullscreenElement及其瀏覽器變體。 – Narretz 2013-10-15 09:26:56

基於什麼I found on Mozilla's Developer Network爲Webkit的功能實際上是拼寫稍有不同。

document.webkitRequestFullscreen用於屏幕的小寫「s」。

和from W3 spec，它是用小寫字母「s」表示的。

在MDN鏈接，他們說：

注：規範使用的標籤，「全屏」，如「requestFullscreen」或「fullscreenEnabled」 - 沒有一個資本「S」。這裏描述的實現和其他前綴實現可能使用大寫'S'。

來源

2013-05-04 07:28:08 Turnerj

感謝你的努力。我相信我以前去過那裏，但這不是主要問題。 Safari/Mac仍然設法在沒有問題的情況下啓動全屏。我剛剛查看的是，即使我們不處於全屏視圖，Chrome也會向'document.webkitFullscreenEnabled'返回true。任何線索？ :) – kyeno 2013-05-04 07:35:43

一些在Chrome控制檯中玩耍的人向我展示了'document'對象實際上並沒有'webkitRequestFullscreen'函數，但是'document.documentElement'卻有。雖然我仍然無法完成它的工作，但我想我可能會提到這一點。 – Turnerj 2013-05-04 07:43:10

看起來可能有一些重要的線索： http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/ 現在就去測試它。 – kyeno 2013-05-04 07:44:45

點擊處理程序：

$("#toolFullScreen").click(function() { 
    goFullScreen(); 
});

功能：

function goFullScreen() { 
    var el = document.documentElement, 
     rfs = el.requestFullScreen 
     || el.webkitRequestFullScreen 
     || el.mozRequestFullScreen 
     || el.msRequestFullscreen; 

    rfs.call(el); 
}

請記住，請求fullScreen需要通過用戶觸發的事件來完成，如單擊事件 - mousedown，mouseup等。

來源

2014-02-23 22:56:57

使用JavaScript切換HTML5 FullScreen API

回答

相關問題