简短的个人书签版

Question

我正在为即将推出的Chrome网上商店创建一个网络应用。有没有办法模拟F11被按下？或者只是一个命令，使当前窗口全屏显示？

Answer 1

我意识到这是一个非常古老的问题，所提供的答案是充分的，因为它是活跃的，我通过对全屏进行一些研究来发现这一点，我在这里留下一个更新：

有一种 “模拟” F11键的方法，但无法实现自动化，用户实际需要点击按钮例如，为了触发全屏模式。

点击按钮

切换全屏状态

With this example ，用户可以通过点击按钮切换到全屏模式：

用作触发器的HTML元素：

<input type="button" value="click to toggle fullscreen" onclick="toggleFullScreen()">

JavaScript的：

function toggleFullScreen() {
  if ((document.fullScreenElement && document.fullScreenElement !== null) ||    
   (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    if (document.documentElement.requestFullScreen) {  
      document.documentElement.requestFullScreen();  
    } else if (document.documentElement.mozRequestFullScreen) {  
      document.documentElement.mozRequestFullScreen();  
    } else if (document.documentElement.webkitRequestFullScreen) {  
      document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);  
    }  
  } else {  
    if (document.cancelFullScreen) {  
      document.cancelFullScreen();  
    } else if (document.mozCancelFullScreen) {  
      document.mozCancelFullScreen();  
    } else if (document.webkitCancelFullScreen) {  
      document.webkitCancelFullScreen();  
    }  
  }  
}

点击按钮

进入全屏模式

This example 允许您启用全屏模式而不进行更改，即切换到全屏但返回正常屏幕则必须使用F11键：

用作触发器的HTML元素：

<input type="button" value="click to go fullscreen" onclick="requestFullScreen()">

JavaScript的：

function requestFullScreen() {

  var el = document.body;

  // Supports most browsers and their versions.
  var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen 
  || el.mozRequestFullScreen || el.msRequestFullScreen;

  if (requestMethod) {

    // Native full screen.
    requestMethod.call(el);

  } else if (typeof window.ActiveXObject !== "undefined") {

    // Older IE.
    var wscript = new ActiveXObject("WScript.Shell");

    if (wscript !== null) {
      wscript.SendKeys("{F11}");
    }
  }
}

找到的来源以及有关此主题的有用信息：

Mozilla Developer Network

How to make in Javascript full screen windows (stretching all over the screen)

How to make browser full screen using F11 key event through JavaScript

Chrome Fullscreen API

jQuery fullscreen event plugin, version 0.2.0

jquery-fullscreen-plugin

Answer 2

It's possible with JavaScript

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

Answer 3

简短的个人书签版

javascript: document.body.webkitRequestFullScreen();

go fullscreen←您可以将此链接拖到书签栏以创建书签，但之后必须编辑其URL：删除javascript之前的所有内容，包括单斜杠： ~~{ {1}}~~ http://delete_me/ [...]

这适用于Google Chrome。您必须测试它是否在您的环境中工作，否则使用函数调用的不同措辞，例如javascript:document.body.requestFullScreen(); - 查看可能变体的其他答案。

_{基于@Zuul和@default的回答 - 谢谢！}

Answer 4

如果您想将整个标签切换为全屏（就像F11按键一样）document.documentElement是您要查找的元素：

function go_full_screen(){
    var elem = document.documentElement;
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.msRequestFullscreen) {
      elem.msRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
      elem.webkitRequestFullscreen();
    }
}

Answer 5

以下是两种方法：

我建议，提供一个弹出窗口，询问用户他/她是否想全屏，然后相应地调用此javascript。

Answer 6

我在此问题上尝试了其他答案，并且不同的浏览器API均存在错误，尤其是 Fullscreen 与 FullScreen 。这是我的适用于主要浏览器的代码（截至2019年第一季度），并且在它们标准化后应该可以继续使用。

  function fullScreenTgl（）{
    让doc = document，elm = doc.documentElement;
    如果（elm.requestFullscreen）{（！doc.fullscreenElement？elm.requestFullscreen（）：doc.exitFullscreen（））}
    否则if（elm.mozRequestFullScreen）{（！doc.mozFullScreen？elm.mozRequestFullScreen（）：doc.mozCancelFullScreen（））}
    否则if（elm.msRequestFullscreen）{（！doc.msFullscreenElement？elm.msRequestFullscreen（）：doc.msExitFullscreen（））}
    否则if（elm.webkitRequestFullscreen）{（！doc.webkitIsFullscreen？elm.webkitRequestFullscreen（）：doc.webkitCancelFullscreen（））}
    否则{console.log（“未检测到全屏支持。”）; }
    }

Answer 7

//set height of html
$("html").css("height", screen.height);
//set width of html
$("html").css("width", screen.width);
//go to full screen mode
document.documentElement.webkitRequestFullscreen();

Answer 8

var elem = document.getElementById("myvideo");
function openFullscreen() {
  if (elem.requestFullscreen) {
      elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
      elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
      elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
      elem.msRequestFullscreen();
  }
}
//Internet Explorer 10 and earlier does not support the msRequestFullscreen() method.

Answer 9

那么简单试试这个

subscribe

onclick全屏

9 个答案:

点击按钮

点击按钮

找到的来源以及有关此主题的有用信息：

简短的个人书签版