javascript - HTML javascript 全屏

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(); }
});