点击进入全屏

IT技术 javascript html
2021-02-11 05:56:54

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

6个回答

我意识到这是一个非常古老的问题,并且提供的答案已经足够了,因为它是活跃的,并且我通过对全屏进行了一些研究而遇到了这个问题,我在这里留下了对该主题的一个更新:

有一种方法来“模拟”F11键,但不能自动的,用户实际需要点击例如按钮,以触发全屏模式。

  • 单击按钮时切换全屏状态

    在这个例子中,用户可以通过点击一个按钮来切换全屏模式:

    用作触发器的 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();  
        }  
      }  
    }
    
  • 单击按钮转到全屏

    此示例允许您在不进行更改的情况下启用全屏模式,即您切换到全屏但要返回到正常屏幕必须使用 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 开发者网络

如何在 Javascript 中制作全屏窗口(在整个屏幕上拉伸)

如何通过 JavaScript 使用 F11 键事件使浏览器全屏

Chrome 全屏 API

jQuery 全屏事件插件,版本 0.2.0

jquery-全屏插件

@Zuul - 我参考了您的回答来回答这个问题,但是我更新了 JS 代码以添加 IE 兼容性。
2021-03-22 05:56:54
链接坏了:(
2021-03-24 05:56:54
@Zuul 您的两个示例现在链接到托管 404 的 Dropbox
2021-04-05 05:56:54
特定于 IE 的全屏方法是msRequestFullscreenmsExitFullscreen(注意小写s
2021-04-07 05:56:54
如何为仅 Chrome(非跨浏览器)修改此代码?
2021-04-07 05:56:54

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();
}
如果您更喜欢平滑各种浏览器实现,请尝试 Screenfull.js ( sindresorhus.com/screenfull.js ) - 它很有用!
2021-03-19 05:56:54
+1。我讨厌调整浏览器大小的网站/应用程序。如果我需要调整它的大小或全屏,我会自己做!
2021-03-26 05:56:54
它在页面加载时全屏存在。我能做些什么来防止这种情况发生?
2021-03-30 05:56:54

简短的个人书签版本

javascript: document.body.webkitRequestFullScreen(); 

转到全屏← 您可以将此链接拖到您的书签栏以创建书签,但之后您必须编辑其 URL:删除之前的所有内容javascript,包括单斜杠:[...]http://delete_me/javascript:

这在 Google Chrome 中对我有用。您必须测试它是否在您的环境中工作,否则使用函数调用的不同措辞,例如javascript:document.body.requestFullScreen();- 请参阅其他答案以了解可能的变体。

基于@Zuul 和@default 的回答——谢谢!

我发现我必须在 Firefox(移动和桌面)中向页面添加触发器以保持在安全限制范围内。我让按钮点击进入全屏并删除自身。javascript:void%20document.body.appendChild((e=%3E%7Be.onclick=()=%3E%7Bdocument.documentElement.requestFullscreen();e.parentNode.removeChild(e)%7D;e.innerHTML='FULLSCREEN';e.style='position:fixed;left:0;top:0;z-index:999999999999';return%20e%7D)(document.createElement('BUTTON')))并用于void避免用函数的返回值替换当前文档。
2021-04-08 05:56:54

如果您想将整个选项卡切换到全屏(就像 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();
    }
}
使用document.documentElementdocument.body(就像@Zuul 在上面的旧答案中所做的那样)有区别吗?
2021-04-09 05:56:54

我在这个问题上尝试了其他答案,不同的浏览器 API 存在错误,特别是Fullscreenvs FullScreen. 这是我的代码适用于主要浏览器(截至 2019 年第一季度),并且应该在它们标准化时继续工作。

function fullScreenTgl() {
    let doc=document,elm=doc.documentElement;
    if      (elm.requestFullscreen      ) { (!doc.fullscreenElement   ? elm.requestFullscreen()       : doc.exitFullscreen()        ) }
    else if (elm.mozRequestFullScreen   ) { (!doc.mozFullScreen       ? elm.mozRequestFullScreen()    : doc.mozCancelFullScreen()   ) }
    else if (elm.msRequestFullscreen    ) { (!doc.msFullscreenElement ? elm.msRequestFullscreen()     : doc.msExitFullscreen()      ) }
    else if (elm.webkitRequestFullscreen) { (!doc.webkitIsFullscreen  ? elm.webkitRequestFullscreen() : doc.webkitCancelFullscreen()) }
    else                                  { console.log("Fullscreen support not detected.");                                          }
    }