BootstrapBlazor组件库中，如何实现Blazor的全屏按钮或全屏服务功能？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1845个文字，预计阅读时间需要8分钟。
Blazor 简介：Blazor 是一个利用 .NET 技术构建的交互式 Web UI 框架。与前端同构的 Vue、React、Angular 相比，Blazor 具有显著差异。其最大特点是使用 C# 语言进行开发。
Blazor 简介Blazor 是一个使用 .NET 生成的交互式客户端 Web UI 的框架。和前端同学所熟知的 Vue、React、Angular 有巨大差异。
其最大的特色是使用 C# 代码（理论上可以是 .NET 生态的任何语言）代替 JavaScript 来实现逻辑。
- 使用 C# 代替 JavaScript 来创建信息丰富的交互式 UI。
- 共享使用 .NET 编写的服务器端和客户端应用逻辑。
- 将 UI 呈现为 HTML 和 CSS，以支持众多浏览器，其中包括移动浏览器。
- 与新式托管平台（如 Docker）集成。
- 使用 .NET 和 Blazor 生成混合桌面和移动应用。
使用 .NET 进行客户端 Web 开发可提供以下优势：
- 使用 C# 代替 JavaScript 来编写代码。
- 利用现有的 .NET 库生态系统。
- 在服务器和客户端之间共享应用逻辑。
- 受益于 .NET 的性能、可靠性和安全性。
- 使用开发环境（例如 Visual Studio 或 Visual Studio Code）保持 Windows、Linux 或 macOS 上的工作效率。
- 以一组稳定、功能丰富且易用的通用语言、框架和工具为基础来进行生成。
有两种不同开发模式
Blazor WebAssembly， C# 代码运行在浏览器中。
Blazor Server，C# 代码在服务器端执行，使用 SignalR 同步到浏览器进行更新。
Blazor 是 apt.net core 生态的组成部分，所涉及到的技术也大部分和 .net 相关。
视图层，使用 Razor 3 技术进行前端的编排渲染。Razor是一种标记语法，是 asp.net core 的默认视图语法，最显著的特点是强类型（C#、VB等）的代码可以和 HTML 写在一个文件中，当然也可以分开。在 razor 文件中，@符号后面的都是强类型语言，可以是一行中的一部分，也可以是一整行，还可以是一个段落。在 asp.net core 中的大致做法是把 VB、C# 等强类型语言嵌入到网页，当网页被请求的时候，在服务器端执行嵌入的代码，动态生成页面。
以 Blazor WebAssembly 开发方式运行时，依赖 WebAssembly 4 技术，可以做成静态页面不依赖任何后端服务器。
以 Blazor Server 方式开发运行时，依赖 SignalR 5 技术，并且需要后端服务器端配合。
Bootstrap 风格的 Blazor UI 组件库 - BootstrapBlazorwww.blazor.zone/index
基于 Bootstrap 样式库精心打造，并且额外增加了 100 多种常用的组件，为您快速开发项目带来非一般的感觉.
Element.requestFullscreen()参考资料 developer.mozilla.org/zh-CN/docs/Web/API/Element/requestFullScreen
Element.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式。
调用此API并不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式，返回的Promise会resolve，并且该元素会收到一个fullscreenchange (en-US)事件，通知它已经进入全屏模式。如果全屏请求被拒绝，返回的promise会变成rejected并且该元素会收到一个fullscreenerror (en-US)事件。如果该元素已经从原来的文档中分离，那么该文档将会收到这些事件。
早期的Fullscreen API实现总是会把这些事件发送给document，而不是调用的元素，所以你自己可能需要处理这样的情况。参考 Browser compatibility in [Page not yet written] 来得知哪些浏览器做了这个改动。
注意：这个方法只能在用户交互或者设备方向改变的时候调用，否则将会失败。
语法
var Promise = Element.requestFullscreen(options);
参数
options 可选
一个FullscreenOptions (en-US)对象提供切换到全屏模式的控制选项。目前，唯一的选项是navigationUI (en-US)，这控制了是否在元素处于全屏模式时显示导航条UI。默认值是"auto"，表明这将由浏览器来决定是否显示导航条。
返回值
在完成切换全屏模式后，返回一个已经用值 undefined resolved的Promise
异常
requestFullscreen() 通过拒绝返回的 Promise来生成错误条件，而不是抛出一个传统的异常。拒绝控制器接收以下的某一个值：
TypeError
在以下几种情况下，会抛出TypeError：
文档中包含的元素未完全激活，也就是说不是当前活动的元素。
元素不在文档之内。
因为功能策略限制配置或其他访问控制，元素不被允许使用"fullscreen"功能。
元素和它的文档是同一个节点。
bb_Fullscreen: function (ele) {
ele.requestFullscreen() ||
ele.webkitRequestFullscreen ||
ele.mozRequestFullScreen ||
ele.msRequestFullscreen;
},
bb_ExitFullscreen: function () {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
});
2.建立Razor页面测试
以下为简化代码,运行测试一下功能是否达到需求.
<button @onclick="FullScreen">全屏</button>
<button @onclick="ExitFullScreen">退出全屏</button>
@code{
[Inject] IJSRuntime? JSRuntime{ get; set; }
//进入全屏
private Task FullScreen() => await JSRuntime.InvokeVoidAsync("bb_Fullscreen");
//退出全屏
private Task ExitFullScreen() => await JSRuntime.InvokeVoidAsync("bb_ExitFullscreen");
}
3.优化逻辑,添加单按钮全屏切换逻辑,添加针对单独元素的全屏逻辑
JS完整代码
(function ($) {
$.extend({
bb_toggleFullscreen: function (el, id) {
var ele = el;
if (!ele || ele === '') {
if (id) {
ele = document.getElementById(id);
}
else {
ele = document.documentElement;
}
}
if ($.bb_IsFullscreen()) {
$.bb_ExitFullscreen();
ele.classList.remove('fs-open');
}
else {
$.bb_Fullscreen(ele);
ele.classList.add('fs-open');
}
},
bb_Fullscreen: function (ele) {
ele.requestFullscreen() ||
ele.webkitRequestFullscreen ||
ele.mozRequestFullScreen ||
ele.msRequestFullscreen;
},
bb_ExitFullscreen: function () {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
},
bb_IsFullscreen: function () {
return document.fullscreen ||
document.webkitIsFullScreen ||
document.webkitFullScreen ||
document.mozFullScreen ||
document.msFullScreent;
}
});
})(jQuery);
测试功能
<button @onclick="ToggleFullScreen">全屏</button>
@code{
[Inject] IJSRuntime? JSRuntime{ get; set; }
//全屏方法，已经全屏时再次调用后退出全屏
private Task ToggleFullScreen() => await JSRuntime.InvokeVoidAsync("bb_toggleFullscreen");
}
4.封装为服务
再次进行思考,如果将一颗按钮封装为组件,那只有UI界面才能调用,而且式样什么的都不算最灵活,为何不做成一个服务,与UI分开解耦呢? 别着急, 马上开干.
我作为一个blazor爱好者,每一个想法,转化为一个组件后,是值得提交到例如BootstrapBlazor之类组件库大家一起学习一起进步的,自从我2020-09-25把ZXingBlazor组件提交到BootstrapBlazor之后,从自嗨到团队合作,真的学习到了很多知识和技巧,在学习BB的源码的过程中,深刻体会到了那句话的精髓:"每入一寸就有一寸的惊喜!".
项目负责人Argo作为一位微软MVP和业内人士,对整个微软技术栈有很深刻的认识和思考,对我本人更是帮助巨大,在此谢谢Argo,
本文共计1845个文字，预计阅读时间需要8分钟。
Blazor 简介：Blazor 是一个利用 .NET 技术构建的交互式 Web UI 框架。与前端同构的 Vue、React、Angular 相比，Blazor 具有显著差异。其最大特点是使用 C# 语言进行开发。
Blazor 简介Blazor 是一个使用 .NET 生成的交互式客户端 Web UI 的框架。和前端同学所熟知的 Vue、React、Angular 有巨大差异。
其最大的特色是使用 C# 代码（理论上可以是 .NET 生态的任何语言）代替 JavaScript 来实现逻辑。
- 使用 C# 代替 JavaScript 来创建信息丰富的交互式 UI。
- 共享使用 .NET 编写的服务器端和客户端应用逻辑。
- 将 UI 呈现为 HTML 和 CSS，以支持众多浏览器，其中包括移动浏览器。
- 与新式托管平台（如 Docker）集成。
- 使用 .NET 和 Blazor 生成混合桌面和移动应用。
使用 .NET 进行客户端 Web 开发可提供以下优势：
- 使用 C# 代替 JavaScript 来编写代码。
- 利用现有的 .NET 库生态系统。
- 在服务器和客户端之间共享应用逻辑。
- 受益于 .NET 的性能、可靠性和安全性。
- 使用开发环境（例如 Visual Studio 或 Visual Studio Code）保持 Windows、Linux 或 macOS 上的工作效率。
- 以一组稳定、功能丰富且易用的通用语言、框架和工具为基础来进行生成。
有两种不同开发模式
Blazor WebAssembly， C# 代码运行在浏览器中。
Blazor Server，C# 代码在服务器端执行，使用 SignalR 同步到浏览器进行更新。
Blazor 是 apt.net core 生态的组成部分，所涉及到的技术也大部分和 .net 相关。
视图层，使用 Razor 3 技术进行前端的编排渲染。Razor是一种标记语法，是 asp.net core 的默认视图语法，最显著的特点是强类型（C#、VB等）的代码可以和 HTML 写在一个文件中，当然也可以分开。在 razor 文件中，@符号后面的都是强类型语言，可以是一行中的一部分，也可以是一整行，还可以是一个段落。在 asp.net core 中的大致做法是把 VB、C# 等强类型语言嵌入到网页，当网页被请求的时候，在服务器端执行嵌入的代码，动态生成页面。
以 Blazor WebAssembly 开发方式运行时，依赖 WebAssembly 4 技术，可以做成静态页面不依赖任何后端服务器。
以 Blazor Server 方式开发运行时，依赖 SignalR 5 技术，并且需要后端服务器端配合。
Bootstrap 风格的 Blazor UI 组件库 - BootstrapBlazorwww.blazor.zone/index
基于 Bootstrap 样式库精心打造，并且额外增加了 100 多种常用的组件，为您快速开发项目带来非一般的感觉.
Element.requestFullscreen()参考资料 developer.mozilla.org/zh-CN/docs/Web/API/Element/requestFullScreen
Element.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式。
调用此API并不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式，返回的Promise会resolve，并且该元素会收到一个fullscreenchange (en-US)事件，通知它已经进入全屏模式。如果全屏请求被拒绝，返回的promise会变成rejected并且该元素会收到一个fullscreenerror (en-US)事件。如果该元素已经从原来的文档中分离，那么该文档将会收到这些事件。
早期的Fullscreen API实现总是会把这些事件发送给document，而不是调用的元素，所以你自己可能需要处理这样的情况。参考 Browser compatibility in [Page not yet written] 来得知哪些浏览器做了这个改动。
注意：这个方法只能在用户交互或者设备方向改变的时候调用，否则将会失败。
语法
var Promise = Element.requestFullscreen(options);
参数
options 可选
一个FullscreenOptions (en-US)对象提供切换到全屏模式的控制选项。目前，唯一的选项是navigationUI (en-US)，这控制了是否在元素处于全屏模式时显示导航条UI。默认值是"auto"，表明这将由浏览器来决定是否显示导航条。
返回值
在完成切换全屏模式后，返回一个已经用值 undefined resolved的Promise
异常
requestFullscreen() 通过拒绝返回的 Promise来生成错误条件，而不是抛出一个传统的异常。拒绝控制器接收以下的某一个值：
TypeError
在以下几种情况下，会抛出TypeError：
文档中包含的元素未完全激活，也就是说不是当前活动的元素。
元素不在文档之内。
因为功能策略限制配置或其他访问控制，元素不被允许使用"fullscreen"功能。
元素和它的文档是同一个节点。
bb_Fullscreen: function (ele) {
ele.requestFullscreen() ||
ele.webkitRequestFullscreen ||
ele.mozRequestFullScreen ||
ele.msRequestFullscreen;
},
bb_ExitFullscreen: function () {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
});
2.建立Razor页面测试
以下为简化代码,运行测试一下功能是否达到需求.
<button @onclick="FullScreen">全屏</button>
<button @onclick="ExitFullScreen">退出全屏</button>
@code{
[Inject] IJSRuntime? JSRuntime{ get; set; }
//进入全屏
private Task FullScreen() => await JSRuntime.InvokeVoidAsync("bb_Fullscreen");
//退出全屏
private Task ExitFullScreen() => await JSRuntime.InvokeVoidAsync("bb_ExitFullscreen");
}
3.优化逻辑,添加单按钮全屏切换逻辑,添加针对单独元素的全屏逻辑
JS完整代码
(function ($) {
$.extend({
bb_toggleFullscreen: function (el, id) {
var ele = el;
if (!ele || ele === '') {
if (id) {
ele = document.getElementById(id);
}
else {
ele = document.documentElement;
}
}
if ($.bb_IsFullscreen()) {
$.bb_ExitFullscreen();
ele.classList.remove('fs-open');
}
else {
$.bb_Fullscreen(ele);
ele.classList.add('fs-open');
}
},
bb_Fullscreen: function (ele) {
ele.requestFullscreen() ||
ele.webkitRequestFullscreen ||
ele.mozRequestFullScreen ||
ele.msRequestFullscreen;
},
bb_ExitFullscreen: function () {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
},
bb_IsFullscreen: function () {
return document.fullscreen ||
document.webkitIsFullScreen ||
document.webkitFullScreen ||
document.mozFullScreen ||
document.msFullScreent;
}
});
})(jQuery);
测试功能
<button @onclick="ToggleFullScreen">全屏</button>
@code{
[Inject] IJSRuntime? JSRuntime{ get; set; }
//全屏方法，已经全屏时再次调用后退出全屏
private Task ToggleFullScreen() => await JSRuntime.InvokeVoidAsync("bb_toggleFullscreen");
}
4.封装为服务
再次进行思考,如果将一颗按钮封装为组件,那只有UI界面才能调用,而且式样什么的都不算最灵活,为何不做成一个服务,与UI分开解耦呢? 别着急, 马上开干.
我作为一个blazor爱好者,每一个想法,转化为一个组件后,是值得提交到例如BootstrapBlazor之类组件库大家一起学习一起进步的,自从我2020-09-25把ZXingBlazor组件提交到BootstrapBlazor之后,从自嗨到团队合作,真的学习到了很多知识和技巧,在学习BB的源码的过程中,深刻体会到了那句话的精髓:"每入一寸就有一寸的惊喜!".
项目负责人Argo作为一位微软MVP和业内人士,对整个微软技术栈有很深刻的认识和思考,对我本人更是帮助巨大,在此谢谢Argo,