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


当前回答

你能试试吗:

<script type="text/javascript"> 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(); } } </script> <a href="#" onClick="go_full_screen();">Full Screen / Compress Screen</a>

其他回答

试试这个脚本

<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>

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

window.fullScreen = true;

新的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

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

这是JavaScript中最接近全屏的效果:

<script type="text/javascript">
    window.onload = maxWindow;

    function maxWindow() {
        window.moveTo(0, 0);

        if (document.all) {
            top.window.resizeTo(screen.availWidth, screen.availHeight);
        }

        else if (document.layers || document.getElementById) {
            if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) {
                top.window.outerHeight = screen.availHeight;
                top.window.outerWidth = screen.availWidth;
            }
        }
    }
</script>