HTML javascript fullscreen

Question

我在嘗試將全屏功能添加到我的應用中的某個元素時出現問題。

我基本上做這樣的事情：

var launchFullScreen = function (element) { 
    if(element.requestFullScreen) { 
     element.requestFullScreen(); 
    } 
    else if(element.mozRequestFullScreen) { 
     element.mozRequestFullScreen(); 
    } 
    else if(element.webkitRequestFullScreen) { 
     element.webkitRequestFullScreen(); 
    } 
}; 

var cancelFullscreen = function() { 

    if(document.cancelFullScreen) { 
     document.cancelFullScreen(); 
    } 
    else if(document.mozCancelFullScreen) { 
     document.mozCancelFullScreen(); 
    } 
    else if(document.webkitCancelFullScreen) { 
     document.webkitCancelFullScreen(); 
    } 

}; 

$("#view").on("keypress", function(event){ 
    if(event.which == 27){ 
     cancelFullscreen(); 
    } 
}); 

$("#view").on("click", function(event){ 
    console.log("view clicked"); 
    launchFullScreen($("#view")); 
}); 

我不明白我在做什麼錯。有什麼建議麼？

Answer 1

我相信你是全屏調用jQuery包裹的元素，而不是元素本身。試試這個：

launchFullScreen($("#slideView").get(0)); 

Answer 2

這裏有一個解決方案：

var 
view = document.querySelector("#view"), 
launchFullscreen = function(element){ 
    var domPrefixes = 'webkit moz o ms khtml'.split(' '), i = 0, prefix = null; 
    while(!(prefix = previewFrame[domPrefixes[i] + 'RequestFullScreen'])){ i++; } 
    prefix.apply(element); 
}, 
cancelFullscreen = function(){ 
    var domPrefixes = 'webkit moz o ms khtml'.split(' '), i = 0, prefix = null; 
    while(!(prefix = previewFrame[domPrefixes[i] + 'CancelFullScreen'])){ i++; } 
    prefix.apply(document); 
}; 

view.addEventListener('click', function(){ 
    launchFullscreen(this); 
}); 

view.addEventListener("keypress", function(event){ 
    if(event.which == 27){ cancelFullscreen(); } 
});