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


当前回答

函数f () {plr.requestFullscreen (); document.exitFullscreen ()};plr.requestFullscreen():document.exitFullscreen()}

<!DOCTYPE html><html><head>

<style>
body{background:#000}
#plr{position:relative;background:#fff;width:360px}
#vd{width:100%;background:grey}
button{width:48px;height:48px;border:0;background:grey}
</style>

</head><body>

<div id="plr">
<video id="vd" src="video.mp4"></video>
<button onclick="(plr.offsetWidth==360)?plr.requestFullscreen():document.exitFullscreen()">fs</button>
<button onclick="plr.requestFullscreen();document.exitFullscreen()">fs2</button>
</div>

</body></html>

其他回答

幸运的是,对于毫无戒心的网络用户来说,这不能用javascript完成。你需要编写特定于浏览器的插件,如果它们还不存在的话,然后以某种方式让人们下载它们。你能得到的最接近的是一个最大化的窗口,没有工具或导航栏,但用户仍然能够看到url。

窗口.open(“http://www.wege.com”,“标题”,“类型”=fullWindow, fullscreen, scrollbars=yes);“>

这通常被认为是不好的做法,因为它从用户那里删除了很多浏览器功能。

我用过这个…

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

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

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

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

演示。

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