Question

我想制作一个按钮，如果按下按钮就像按下键盘上的F11键一样。对于按钮html就像这样（我认为）

<button type="button" onclick="some function">FullScreen</button>

现在我不知道onclick会有什么功能，因为我没有JS。如果文字“FULLSCREEN”的话，还有一件事情会更好。更改为“正常窗口”＆＃39;当按下按钮时，用户可以意识到他们必须再次按下相同的按钮才能离开全屏，这就像在每次点击时切换来自“FULLSCREEN”的文本更改。到了正常的窗口＆＃39;如果再次按下则更改为“FULLSCREEN”。

Answer 1

function ToggleFullScreen() {
  // UniversalXPConnect privilege is required in Firefox
  try {
    if (window.netscape && netscape.security) { // Firefox
      netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
    }
  } catch (e) {
    alert("UniversalXPConnect privilege is required for this operation!");
    return;
  }

  if ('fullScreen' in window) {
    window.fullScreen = !window.fullScreen;
  } else {
    alert("Your browser does not support this example!");
  }
}

<body>
  Press this button,
  <button onclick="ToggleFullScreen ();">Change full screen mode!</button>
  or press F11 to toggle between normal and full screen mode.
</body>

Answer 2

.jsp页面

<img alt="" src="../static/images/Full_Screen.png" height="30" width="30" title="Full screen" id="fullscreen" name="fullscreen"/>
<img alt="" src="../static/images/Exit_full_screen.png" height="30" width="30" title=" Exit Full screen" id="exitFullscreen" name="exitFullscreen"/>

<强>的.js

var full=0;
$(function() {
    $('#exitFullscreen').hide();//hide exit fullscreen image on page load

    $('#exitFullscreen').click(function() {
        exitFullscreen();//function to exit from full screen

    });

    $('#fullscreen').click(function() {
        fullscreen();//function to get  full screen
    });
});

//if user click f11 instead button we have to toggle ....
    $(document).keyup(function(e){
       if(e.which==122){
           e.preventDefault();//kill anything that browser may have assigned to it by default
           if(full==1){
              exitFullscreen();
            }
          else {
              fullscreen();
          }
       }
});

function fullscreen() {

    var docElm = document.documentElement;

    if (docElm.requestFullscreen) {
        docElm.requestFullscreen();

    } else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
    } else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
    }

    $('#exitFullscreen').show();
    $('#fullscreen').hide();
    full=1;

}

function exitFullscreen() {
    if (document.cancelFullScreen) {
        document.cancelFullScreen();}
        else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
        }
        else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
        }
        else if (document.msExitFullscreen) {
        document.msExitFullscreen();
        } 
    $('#exitFullscreen').hide();
    $('#fullscreen').show();
    full=0;
}

//worked on moxz

使用JS的按钮具有F11键盘键的功能

2 个答案: