如何使用Javascript使窗口全屏(伸展整个屏幕)

如何使用JavaScript使访问者的浏览器全屏显示，同时兼容IE、Firefox和Opera?

当前回答

在Firefox 10中，你可以使用以下javascript使当前页面全屏(没有窗口chrome的真正全屏):

window.fullScreen = true;

2012-02-11 00:45:34

其他回答

这段代码还包括如何启用Internet Explorer 9的全屏，可能是更老的版本，以及最新版本的谷歌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全屏API(请注意，然而 requestFullscreen“只工作在”“[m]大多数UIEvents和鼠标事件，如点击和按下键等”，“所以它不能被恶意使用”) 如何使浏览器全屏使用F11键事件通过JavaScript

2011-11-01 12:35:36

以下是我对全屏和退出全屏的完整解决方案(非常感谢上面塔的回答):

$(document).ready(function(){
$.is_fs = false;
$.requestFullScreen = function(calr)
{
    var element = document.body;

    // 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}");
        }
    }

    $.is_fs = true;    
    $(calr).val('Exit Full Screen');
}

$.cancel_fs = function(calr)
{
    var element = document; //and NOT document.body!!
    var requestMethod = element.exitFullScreen || element.mozCancelFullScreen || element.webkitExitFullScreen || element.mozExitFullScreen || element.msExitFullScreen || element.webkitCancelFullScreen;

    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}");
        }
    }    

    $(calr).val('Full Screen');    
    $.is_fs = false;
}

$.toggleFS = function(calr)
{    
    $.is_fs == true? $.cancel_fs(calr):$.requestFullScreen(calr);
}

});

// 调用:

<input type="button" value="Full Screen" onclick="$.toggleFS(this);" />

2018-02-02 01:52:26

在较新的浏览器中，如Chrome 15, Firefox 10, Safari 5.1, IE 10，这是可能的。根据浏览器设置，旧版本的IE也可以通过ActiveX实现。

以下是如何做到这一点:

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

2011-09-23 07:40:34

我用过这个…

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
    <script language="JavaScript">
        function fullScreen(theURL) {
            window.open(theURL, '', 'fullscreen=yes, scrollbars=auto');
        }
        // End -->
    </script>
</head>

<body>
    <h1 style="text-align: center;">
        Open In Full Screen
    </h1>
    <div style="text-align: center;"><br>
        <a href="javascript:void(0);" onclick="fullScreen('http://google.com');">
            Open Full Screen Window
        </a>
    </div>
</body>

</html>

2010-04-08 14:37:50

screenfull.js试试。这是一个很好的跨浏览器解决方案，应该也适用于Opera浏览器。

JavaScript全屏API跨浏览器使用的简单包装器，它允许您将页面或任何元素显示为全屏。消除了浏览器实现的差异，所以您不必这样做。

演示。

2019-05-30 09:24:33

如何使用Javascript使窗口全屏(伸展整个屏幕)

推荐文章

最新文章

标签