Asp.Net MVC 如何制作自己的关闭和全屏按钮？答案

【问题标题】：Asp.Net MVC how can I make an own close and fullscreen button?Asp.Net MVC 如何制作自己的关闭和全屏按钮？
【发布时间】：2020-02-21 11:29:54
【问题描述】：

我是 ASP.NET MVC 和 Web 开发的新手，我不知道如何实现全屏和退出按钮

到目前为止，这是我的退出按钮：

<body>
<div id="exit" class="exit">
    @Html.ActionLink("⠀x⠀", null, null, new { @class = "btnclose", id = "close", style = "color: black; font-size:large; font-weight:bold; background-color:red; border-color:#3f464c; border:solid; border-width: 2px" })
</div>
</body>
<script>
    function closewindow() {
        $("#close").click(function () {
            window.close();
        });
    };
</script>

这是我的全屏按钮

<body>
<div align="center">
            <input type="button" name="btnFullscreen" value="Go Fullscreen" style="font-size:xx-large; font-weight:bold; width:500px; height:300px; text-align:center; background-color:#e87a3a; border-color:#3f464c" onclick="goFullscreen()" />
</div>
<body>

<script>

function goFullscreen() {
        location.replace("/Gauge/GaugeView");
        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}");
            }
        }
    }

【问题讨论】：

你的代码几乎接近工作了。任何方式你甚至可以为点击事件添加一个事件监听器，比如addEventListener("click", function () { });，它也可以正常工作。

标签： javascript html asp.net-mvc model-view-controller

【解决方案1】：

您好，我已经查看了您的代码，您几乎就在那里。但是您的代码几乎没有问题。

这是给你的完整示例。

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div>
        <input type="submit" id="btnFullScreen" name="btnFullScreen" value="Full Screen" />
        <input type="submit" id="btnCloseScreen" name="btnCloseScreen" value="Close Full Screen" />
    </div>
    <script type="text/javascript">


    </script>

    <script type="text/javascript">

        //Btn Full Screen
        $("#btnFullScreen").click(function () {
            alert("Test");
            var el = document.documentElement,
                rfs = el.requestFullscreen
                    || el.webkitRequestFullScreen
                    || el.mozRequestFullScreen
                    || el.msRequestFullscreen
                ;

            rfs.call(el);
        });

        //Btn Close Screen
        $("#btnCloseScreen").click(function () {

            alert("Close Screen");
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }

        });
    </script>
</body>
</html>

【讨论】：

但是我可以通过更改“location.replace()”让它保持全屏吗？
我没明白你的意思？
我在下面发布了我更详细的问题
不要这样做会导致投票失败，否则社区可能会关闭您的问题。 Stack flow 的主要座右铭是创建对开发人员友好的存储库。所以我建议你创建新问题，删除你的问题作为答案。希望你理解
发布一个单独的问题，让我知道我会尽力提供帮助