Blazor 全屏

Question

我是 Blazor 的新手，我正在尝试了解如何以全屏模式打开浏览器。我知道我可以执行 Javascript 中断和运行 Javascript 但这违背了 Blazor 的目的。

如何在 Blazor 中进入和退出全屏模式。有没有办法做到这一点？

这是Javascript全屏模式的代码：

https://www.w3schools.com/jsref/met_element_requestfullscreen.asp

 <script>
 /* Get the documentElement (<html>) to display the page in fullscreen */
 var elem = document.documentElement;

 /* View in fullscreen */
 function openFullscreen() {
   if (elem.requestFullscreen) {
     elem.requestFullscreen();
   } else if (elem.mozRequestFullScreen) { /* Firefox */
     elem.mozRequestFullScreen();
   } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
     elem.webkitRequestFullscreen();
   } else if (elem.msRequestFullscreen) { /* IE/Edge */
     elem.msRequestFullscreen();
    }
 }

 /* Close fullscreen */
 function closeFullscreen() {
   if (document.exitFullscreen) {
     document.exitFullscreen();
   } else if (document.mozCancelFullScreen) { /* Firefox */
     document.mozCancelFullScreen();
   } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
     document.webkitExitFullscreen();
   } else if (document.msExitFullscreen) { /* IE/Edge */
     document.msExitFullscreen();
   }
 }
 </script>

Answer 1

您可以使用 PWA 选项在 Blazor 中使用全屏模式：

然后你应该按右上角的这个安装按钮：

在此之后您可以运行它作为全屏模式的桌面应用程序：

Answer 2

已接受的答案仅适用于 Blazor WASM。正如评论中指出的那样，JS-interop 目前是 Blazor Server 的唯一选择。以下是基于 OP 提供的脚本的完整解决方案。

public static partial class IJSRuntimeExtensions
    {
        public static async Task<bool> OpenFullscreen(this IJSRuntime jsRuntime)
        {
            return await jsRuntime.InvokeAsync<bool>("openFullscreen");
        }

        public static async Task<bool> CloseFullscreen(this IJSRuntime jsRuntime)
        {
            return await jsRuntime.InvokeAsync<bool>("closeFullscreen");
        }
    }

    function openFullscreen() {
        // attempt to call the browser API
        } else {
            return false;
        }
    }
        

    function closeFullscreen() {
        // attempt to call the br
        } else {
            return false;
        }
    }

    @inject IJSRuntime JS
    
    @*...*@
    
    private async Task HandleClick()
    {
        var succ = await JS.OpenFullscreen();
    }

Blazor 全屏

Blazor Full Screen

.net

c#

blazor

blazor-server-side

blazor-client-side