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

如何使用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>

2021-04-25 23:00:14

其他回答

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

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

演示。

2019-05-30 09:24:33

试试这个脚本

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

2011-12-16 07:18:18

我用过这个…

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

您可以使用全屏API 你可以在这里看到一个例子

全屏API为web内容提供了一种简单的方式使用用户的整个屏幕呈现。本文提供了有关使用此API的信息。

2012-11-08 18:02:05

这可能支持

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="PRODUCTION_Default5" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Untitled Page</title>
        <script type="text/javascript">
            function max()
            {
               window.open("", "_self", "fullscreen=yes, scrollbars=auto"); 
            }
        </script>
    </head>
    <body onload="max()">
        <form id="form1" runat="server">
        <div>
        This is Test Page
        </div>
        </form>
    </body>
    </html>

2009-11-13 12:45:34

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

推荐文章

最新文章

标签