当前位置:  开发笔记 > 编程语言 > 正文

如何使用Javascript使窗口全屏(在屏幕上伸展)

如何解决《如何使用Javascript使窗口全屏(在屏幕上伸展)》经验,为你挑选了9个好方法。

如何使用JavaScript以一种适用于IE,Firefox和Opera的方式使访问者的浏览器全屏显示?



1> Tower..:

在较新的浏览器中,例如Chrome 15,Firefox 10,Safari 5.1,IE 10,这是可能的.根据浏览器的设置,通过ActiveX也可以使用旧版IE.

这是怎么做的:

function requestFullScreen(element) {
    // Supports most browsers and their versions.
    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;

    if (requestMethod) { // Native full screen.
        requestMethod.call(element);
    } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
}

var elem = document.body; // Make the body go full screen.
requestFullScreen(elem);

用户显然需要首先接受全屏请求,并且不可能在页面加载时自动触发,它需要由用户触发(例如,按钮)

阅读更多:https://developer.mozilla.org/en/DOM/Using_full-screen_mode


太棒了,任何退出全屏的方式?
它只能由用户触发(例如通过全屏按钮).无法在上载期间自动全屏.
目前可在Chrome 15,Firefox 10和Safari 5.1中使用.有关当前比赛状态的详细信息,请参阅[hacks.mozilla.org博客文章](http://hacks.mozilla.org/2012/01/using-the-fullscreen-api-in-web-browsers/).
IE的拼写错误,应该是msRequestFullScreen,如文档http://msdn.microsoft.com/en-us/library/ie/dn265028(v=vs.85).aspx
一些东西.在IE中,这显然会忽略元素和全屏一切.如果你想要全屏,那么传递给`document.documentElement`的一切都将确保你获得正确的根元素('html'或'body').并且使用可以使用`cancelFullscreen()`来关闭它(或者再次为IE发送'F11').

2> Peter O...:

此代码还包括如何为Internet Explorer 9以及可能的旧版本以及最新版本的Google Chrome启用全屏.接受的答案也可用于其他浏览器.

var el = document.documentElement
    , rfs = // for newer Webkit and Firefox
           el.requestFullscreen
        || el.webkitRequestFullScreen
        || el.mozRequestFullScreen
        || el.msRequestFullscreen
;
if(typeof rfs!="undefined" && rfs){
  rfs.call(el);
} else if(typeof window.ActiveXObject!="undefined"){
  // for Internet Explorer
  var wscript = new ActiveXObject("WScript.Shell");
  if (wscript!=null) {
     wscript.SendKeys("{F11}");
  }
}

资料来源:

Chrome Fullscreen API(但请注意, requestFullscreen"只能在"[m] ost UIEvents和MouseEvents中使用,例如点击和键盘等),"因此不能恶意使用".)

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


感谢"(但是,请注意,requestFullScreen"仅适用于""[...] Uvenvents和MouseEvents,例如click和keydown等","所以它不能被恶意使用".)"

3> Saul Dolgin..:

这与JavaScript中的全屏一样接近:

 


这是旧的.看下面的解决方案!
取决于您在选项中的JavaScript权限设置.您可以切换js控制窗口功能.
这发生在上一次网站使用这样的代码并且我没有阻止它:http://dorward.me.uk/tmp/fullscreen.jpeg
看一下webkit-fullscreen API:http://bleeding-edge-tlv.appspot.com/#28(来自#gdd2011)

4> mike nelson..:

这是进入和退出全屏模式的完整解决方案(也就是取消,退出,退出)

        function cancelFullScreen(el) {
            var requestMethod = el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen;
            if (requestMethod) { // cancel 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}");
                }
            }
        }

        function requestFullScreen(el) {
            // 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}");
                }
            }
            return false
        }

        function toggleFull() {
            var elem = document.body; // Make the body go full screen.
            var isInFullScreen = (document.fullScreenElement && document.fullScreenElement !== null) ||  (document.mozFullScreen || document.webkitIsFullScreen);

            if (isInFullScreen) {
                cancelFullScreen(document);
            } else {
                requestFullScreen(elem);
            }
            return false;
        }



5> Sébastien Gi..:

您可以使用全屏API 您可以在此处查看示例

全屏API提供了一种使用用户整个屏幕呈现Web内容的简便方法.本文提供有关使用此API的信息.



6> 小智..:

我用过这个......






    



    

Open In Full Screen


Open Full Screen Window



7> 小智..:

全新的html5技术 -全屏API为我们提供了一种以全屏模式呈现网页内容的简便方法.我们即将为您提供有关全屏模式的详细信息.试着想象一下使用这项技术可以获得的所有优势 - 全屏相册,视频甚至游戏.

但在我们描述这项新技术之前,我必须指出这项技术是实验性的,并得到所有主要浏览器的支持.

你可以在这里找到完整的教程: http ://www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/

这是工作演示: http ://demo.web3designs.com/javascript-jquery-fullscreen-browser-window-html5-technology.htm



8> Jacob..:

简单的例子来自:http://www.longtailvideo.com/blog/26517/using-the-browsers-new-html5-fullscreen-capabilities/







9> Dixit..:

创建功能

function toggleFullScreen() {

            if ((document.fullScreenElement && document.fullScreenElement !== null) ||
                    (!document.mozFullScreen && !document.webkitIsFullScreen)) {
             $scope.topMenuData.showSmall = true;
                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 {

                  $scope.topMenuData.showSmall = false;
                if (document.cancelFullScreen) {
                    document.cancelFullScreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                }
            }
        }

在Html Put Code中

  • Full Screen
  • Back

推荐阅读
360691894_8a5c48
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有