使用 JS 和 F11 键盘键功能的按钮

Button using JS with functionality of F11 keyboard key

本文关键字：功能 按钮 键盘 JS F11 使用      更新时间：2023-09-26

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

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

现在我不知道那个onclick会有什么功能，因为我没有JS。还有一件事，如果在按下按钮时文本"全屏"更改为"正常窗口"，以便用户可以意识到他们必须再次按下相同的按钮才能退出全屏，就像每次单击时切换文本从"全屏"更改为"普通窗口"，然后如果再次按下更改为"全屏"。

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>

.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
相关文章：