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


当前回答

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

window.fullScreen = true;

其他回答

如果你是在一个“售货亭”的情况下,一个进入全屏的Q&D方法是在浏览器窗口启动并运行后输入一个F11。这不是一个很好的开始,用户可能可以在顶部戳一个触摸屏,获得半全屏的视图,但在紧急情况下,或者只是为了开始一个项目,可以使用F11。

这段代码还包括如何启用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

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

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

演示。

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

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

试试这个脚本

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

从脚本调用使用以下代码,

window.fullScreen('fullscreen.jsp');

或者用超链接使用这个

<a href="javascript:void(0);" onclick="fullScreen('fullscreen.jsp');"> 
Open in Full Screen Window</a>