SpringBoot实战项目之谷歌浏览器全屏效果实现

项目场景:

客户需求文档中,要求在Win10系统下须使用Chrome谷歌浏览器展示页面,但高层相关方希望页面展示时可以实现全屏效果以提高用户体验。

对于谷歌浏览器的全屏功能来说,前端的实现已经不行了,之前谷歌浏览器基于安全的考虑封禁了任何调用全屏的事件(必须用户手势user gesture),有尝试过捕获用户手势触发点击事件的参数,但捕获到后发现事件参数太多(密密麻麻的ε=ε=ε=ε=ε=ε=┌(; ̄◇ ̄)┘),模拟起来太费劲会浪费太多时间(还是算了吧 ╮(๑•́ ₃•̀๑)╭)。

由于Chrome谷歌浏览器的全屏触发键盘按键是F11,我就以按F11为目标整理一下思路。首先,页面初始化发送一个get请求给后端程序接口,程序接收请求开始编写vbs脚本并生成vbs脚本文件保存在Win10默认桌面路径上,程序再运行此脚本点击F11完成全屏效果,流程图如下:

问题描述:

接下来的问题在于后端代码执行运行vbs脚本时遇到的权限问题,这段代码如下:

	Process process = Runtime.getRuntime().exec(cmd);

原因分析:

假如运行没有系统管理员权限的cmd来运行jar包的话,你会发现这段代码不会运行也不会报错,但是就是没有效果出来(咦?我明明按了F11,全屏呢 ◔ ‸◔?)。

解决方案:

接下来就来看一下代码部分,首先先从后端程序接口开始:

/**
 * @Author: Tony Peng
 * @Date: 2021/7/9 10:20
 **/
@Slf4j
@RestController
@RequestMapping("/fullscreen")
public class FullscreenController {

    @GetMapping("/active")
    public void active(HttpServletRequest request) {
    	//获取客户端IP,用来写日志的
        String clientIp = request.getRemoteHost();
        //桌面生成脚本的文件名,可自定义
        String fileName = "F11";
        //vbs脚本内容
        String command = "set ws=createObject(\"WScript.Shell\")\nws.SendKeys \"{F11}\"";
        //获取Win10默认桌面路径,亲测部署可用
        String fileUrl = FileSystemView.getFileSystemView().getHomeDirectory() + "\\" + fileName + ".vbs";
        //生成vbs脚本文件在桌面上
        File file = new File(fileUrl);
        try {
        	//这边判断一下,文件不存在的话就再写一份
            if (!file.exists()) {
                FileWriter fw = new FileWriter(fileUrl);
                fw.write(command);
                fw.close();
            }
            String[] cmd = new String[]{"wscript", fileUrl};
            //此行代码运行vbs脚本文件会需要系统管理员权限
            Process process = Runtime.getRuntime().exec(cmd);
            process.waitFor();
        } catch (Exception e) {
            log.error("客户端IP【{}】F11调用失败!原因:" + e.getMessage(), clientIp);
        }
        log.info("客户端IP【{}】F11调用成功!", clientIp);
    }

} (ง •̀_•́)ง

以上接口写好后用自己的编译器(偶用滴素IDEA (●>∀<●))运行起来,用另一台电脑打开Postman测试一下接口,屡试不爽,兴冲冲的打包部署,部署完后却发现测来测去咋滴都没效果呢ヽ(.◕ฺˇд ˇ◕ฺ;)ノ。

还好,经验丰富滴我,试了一下系统管理员cmd运行jar包,诶~~~口以了!!!。:.゚ヽ(。◕‿◕。)ノ゚.:。+゚。

然后,开始写批处理文件先获取系统管理员权限打开cmd后台运行jar包,批处理文件代码如下:

::::::::::::::::::::::::::::::::::::::::::::
:: Elevate.cmd - Version 4
:: Automatically check & get admin rights
::::::::::::::::::::::::::::::::::::::::::::
 @ECHO off
 CLS
 ECHO.
 ECHO =============================
 ECHO Running Admin shell
 ECHO =============================

:init
 setlocal DisableDelayedExpansion
 set cmdInvoke=1
 set winSysFolder=System32
 set "batchPath=%~0"
 for %%k in (%0) do set batchName=%%~nk
 set "vbsGetPrivileges=%temp%\OEgetPriv_%batchName%.vbs"
 setlocal EnableDelayedExpansion

:checkPrivileges
  NET FILE 1>NUL 2>NUL
  if '%errorlevel%' == '0' ( goto gotPrivileges ) else ( goto getPrivileges )

:getPrivileges
  if '%1'=='ELEV' (echo ELEV & shift /1 & goto gotPrivileges)
  ECHO.
  ECHO **************************************
  ECHO Invoking UAC for Privilege Escalation
  ECHO **************************************

  ECHO Set UAC = CreateObject^("Shell.Application"^) > "%vbsGetPrivileges%"
  ECHO args = "ELEV " >> "%vbsGetPrivileges%"
  ECHO For Each strArg in WScript.Arguments >> "%vbsGetPrivileges%"
  ECHO args = args ^& strArg ^& " "  >> "%vbsGetPrivileges%"
  ECHO Next >> "%vbsGetPrivileges%"

  if '%cmdInvoke%'=='1' goto InvokeCmd 

  ECHO UAC.ShellExecute "!batchPath!", args, "", "runas", 1 >> "%vbsGetPrivileges%"
  goto ExecElevation

:InvokeCmd
  @ECHO OFF
  ECHO args = "/c """ + "!batchPath!" + """ " + args >> "%vbsGetPrivileges%"
  ECHO Set ws = CreateObject("Wscript.Shell")
  ECHO UAC.ShellExecute "%SystemRoot%\%winSysFolder%\cmd.exe", args, "", "runas", 1 >> "%vbsGetPrivileges%"

:ExecElevation
 "%SystemRoot%\%winSysFolder%\WScript.exe" "%vbsGetPrivileges%" %*
 exit /B

:gotPrivileges
 @ECHO OFF
 setlocal & cd /d %~dp0
 if '%1'=='ELEV' (del "%vbsGetPrivileges%" 1>nul 2>nul  &  shift /1)

 ::::::::::::::::::::::::::::
 ::START
 ::::::::::::::::::::::::::::
 ::这里输入你的代码

 @ECHO off
 start javaw -Dfile.encoding=utf-8 -jar -Xmn128m -Xms256m -Xmx256m %~dp0\fullscreen.jar

先创建一个文本文件(后缀.txt),编辑输入以上代码,文件后缀改成.bat,双击运行(jar包必须和批处理文件同一个目录下),这时弹窗完两次即启动完成。

作为一个程序员,能少一次弹窗我都觉得开熏 (*^▽^*) ,所以我又写了一个vbs脚本文件隐藏第一次弹窗,目前还没想到如何隐藏第二次弹窗的方法,如果有大神可以指导一下,可以留言一下我再做一下补充并申明某某某大神,感激不尽!Thanks♪(・ω・)ノ

隐藏第一次cmd弹窗脚本如下:

Set ws = CreateObject("Wscript.Shell")
ws.run "cmd /c D:\Fullscreen\fullscreen.bat",vbhide

PS:盘符路径请修改成运行jar包的批处理文件的路径。

这时就差不多大功告成啦!✿✿ヽ(°▽°)ノ✿

下面来补充前端的部分,如何用JS判断当前谷歌浏览器是否全屏,代码如下:

	//谷歌浏览器判断如果不是全屏的情况下
	if (!(document.body.scrollHeight === window.screen.height && document.body.scrollWidth === window.screen.width)) {
		//发送全屏请求
	}

PS:后端程序jar包必须和客户端在同一台计算机上部署,否则全屏无效。

源码链接:

https://github.com/tony901/Fullscreen

都看完啦,给个一键三连八~ \ (*^▽^*) /

行到水穷处,坐看云起时。

到此这篇关于SpringBoot实战项目之谷歌浏览器全屏效果实现的文章就介绍到这了,更多相关SpringBoot 全屏内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • SpringBoot + MapStruct 属性映射工具的使用详解

    1. MapStruct 是什么? 截取下官方的原话 我给翻译了一下 说白了 当你的对象A有几十个属性 而另一个对象B 与A比较只有一些细微的差别 那么这时候只需要映射过去即可 而不需要疯狂的调用set方法 进行属性的拷贝 这就是这个工具给我们带来的最大便利 官方github链接 点击跳转 2. 引入依赖 采用Mapstruct的 最新版本 1.4.2.Final SpringBoot版本不要选新版的 我对比了下 2.3.0 和 2.5.4 后者会出现属性映射为null的情况 已经将问题反馈了

  • SpringBoot整合Swagger2的完整过程记录

    目录 前言 一.Spring Boot Web 整合 Swagger2 过程 1.1.添加 Swagger2 相关依赖 1.2.配置 Swagger2 配置类 二.配置 Swagger2 接口常用注解 2.1.@Api 请求类说明 2.2.@ApiOperation 方法的说明 2.3.@ApiImplicitParams 和 @ApiImplicitParam 方法参数说明 2.4.@ApiResponses 和 @ApiResponse 方法返回值的说明 2.5.@ApiModel 和 @A

  • SpringBoot @PostConstruct和@PreDestroy的使用说明

    目录 1. @PostConstruct 1.1 概述 1.2 验证执行顺序 2. @PreDestroy 1. @PostConstruct 1.1 概述 @PostConstruct标记在方法上,在当前类的实例加入到容器之前,会先执行@PostConstruct标记的方法.它的执行顺序是这样的: 先执行当前类的构造函数 然后执行@Autowired标记对象的初始化 最后执行@PostConstruct标记的方法 如果没有抛出异常,则该对象加入Spring管理容器 1.2 验证执行顺序 创建一

  • 实践讲解SpringBoot自定义初始化Bean+HashMap优化策略模式

    策略模式:定义了算法族,分别封装起来,让它们之间可以互相替换,此模式让算法的变化独立于使用算法的客户. 传统的策略模式一般是创建公共接口.定义公共方法-->然后创建实体类实现公共接口.根据各自的逻辑重写公共方法-->创建一个行为随着策略对象改变而改变的 context 对象-->根据不同的传参,调用不同的接口实现类方法,达到只改变参数即可获得不同结果的目的. 但是也可以明显发现,这种策略模式的实现方式,代码量较大,而且还要自定义要传递的参数,可能会引入一定数量的if/else,有一定的优

  • SpringBoot实战项目之谷歌浏览器全屏效果实现

    项目场景: 客户需求文档中,要求在Win10系统下须使用Chrome谷歌浏览器展示页面,但高层相关方希望页面展示时可以实现全屏效果以提高用户体验. 对于谷歌浏览器的全屏功能来说,前端的实现已经不行了,之前谷歌浏览器基于安全的考虑封禁了任何调用全屏的事件(必须用户手势user gesture),有尝试过捕获用户手势触发点击事件的参数,但捕获到后发现事件参数太多(密密麻麻的ε=ε=ε=ε=ε=ε=┌(; ̄◇ ̄)┘),模拟起来太费劲会浪费太多时间(还是算了吧 ╮(๑•́ ₃•̀๑)╭). 由于Chro

  • Android仿微信图片点击全屏效果

    废话不多说,先看下效果: 先是微信的 再是模仿的 先说下实现原理,再一步步分析 这里总共有2个Activity一个就是主页,一个就是显示我们图片效果的页面,参数通过Intent传送,素材内容均来自网络,(感谢聪明的蘑菇) 图片都是Glide异步下的,下的,下的重要的事情说三次,然后就是用动画做放大操作然后显示出来了(并没有做下载原图的实现,反正也是一样 下载下来Set上去而且动画都不需要更简便). OK,我们来看分析下 obj,目录下分别创建了2个对象,一个用来使用来处理显示页面的图片尺寸信息以

  • android 中ProgressDialog实现全屏效果的示例

    做项目的时候,直接用到了一个ProgressDialog,需要实现全屏的效果,如下图所示,功能跑起来的时候发现不是全屏,只是包裹了当前的内容,如下图所示,不过查找一些资料,把问题解决了. ProgressDialog 继承自AlertDialog,AlertDialog继承自Dialog,实现DialogInterface接口. ProgressDialog的创建方式有两种,一种是new Dialog ,一种是调用Dialog的静态方法Dialog.show(). // 方式一:new Dial

  • 用html5 js实现点击一个按钮达到浏览器全屏效果

    项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有google chrome 15 +, safri5.1+,firfox10+,IE11支持 全屏 var docElm = document.documentElement; //W3C if (docElm.requestFullscreen) { docElm.requestFullscreen()

  • Vue使用screenfull实现全屏效果

    本文实例为大家分享了Vue使用screenfull实现全屏的具体代码,供大家参考,具体内容如下 安装 npm install --save screenfull 在需要的页面引用 import screenfull from 'screenfull' 全屏使用 <template> <span @click='clickFullscreen'>全屏</span> </template> <script> import screenfull fro

  • 浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题

    如果你想使一个元素在全屏模式下展现 (比如说 <video>),你可以调用该元素的 requestFullscreen() 方法:这个方法在 Gecko 中的实现是 element.mozRequestFullScreen(),在 WebKit 中为 element.webkitRequestFullscreen(). 比如一个实例: var elem = document.getElementById("myvideo"); if (elem.requestFullscr

  • Android 实现全屏和无标题栏的显示

    在Android实现没有标题栏的方法有两种: 在代码中添加 requestWindowFeature(Window.FEATURE_NO_TITLE): 在清单文件AndroidManifest.xml中添加 android:theme="@android:style/Theme.NoTitleBar" 具体的代码如下: 第一种: MainActivity.java package com.lingdududu.test; import android.app.Activity; im

  • Android实现无标题栏全屏的方法

    Android中实现全屏.无标题栏的两种办法,另附Android系统自带样式的解释 实现全屏无标题栏: 1.在xml文件中进行配置 AndroidManifest.xml中,找到需要全屏或设置成无标题栏的Activity,在该Activity进行如下配置即可. 实现全屏效果: android:theme="@android:style/Theme.NoTitleBar.Fullscreen"   实现无标题栏(但有系统自带的任务栏): android:theme="@andr

  • Android UI体验之全屏沉浸式透明状态栏样式

    前言: Android 4.4之后谷歌提供了沉浸式全屏体验, 在沉浸式全屏模式下, 状态栏. 虚拟按键动态隐藏, 应用可以使用完整的屏幕空间, 按照 Google 的说法, 给用户一种 身临其境 的体验.而Android 5.0之后谷歌又提出了 ColorPalette 的概念,让开发者可以自己设定系统区域的颜色,使整个 App 的颜色风格和系统的颜色风格保持统一.今天学习总结一下如何实现Android 4.4以上全屏沉浸式透明状态栏效果.先看下预期效果: 首先现分清楚哪部分是状态栏,哪部分是导

  • js实现简单页面全屏

    本文实例为大家分享了js实现简单页面全屏,供大家参考,具体内容如下 全屏效果为传入div元素全屏: 代码块 <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <body> <div style="margin:0 auto;height:600px;width:700px;"> <butto

随机推荐