Fullscreen API的简单使用方法

最新推荐文章于 2024-04-12 14:28:46 发布
最新推荐文章于 2024-04-12 14:28:46 发布
阅读量2.3k 收藏
点赞数
分类专栏： html/css 文章标签： api fullscreen 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014291497/article/details/77874315
版权

参考文章：https://www.sitepoint.com/use-html5-full-screen-api/

这个API的部分功能到今天也没有完全被浏览器实现。更多方法可参考文档。这里实现一个点击图片切换全屏展示的效果（只在Chrome下可用，其他浏览器会有相应的属性名）

<style>
    body{
        margin: 0;
        padding: 0;
    }
    #fullscreen:-webkit-full-screen{
        width: 100%;
        height: 100%;
    }
    img{
        width: 600px;
        vertical-align: bottom;
    }

    /* 全屏状态设置图片宽度 */
    #fullscreen:-webkit-full-screen img{
        width: 100%;
    }

    #fullscreen:-webkit-full-screen:-webkit-backdrop{
        background: maroon;
    }
    #fullscreen:-ms-fullscreen:backdrop{
        background: maroon;
    }
</style>
<body>
    <div id="fullscreen">
        <img id="myImg" src="../beach.jpg" alt="">
    </div>

    <script>
        var $imgContainer = document.getElementById("fullscreen");
        var $img = document.getElementById("myImg");

        // 点击图片切换全屏状态
        $img.addEventListener("click", function(){
            if(document.webkitIsFullScreen){
                document.webkitExitFullscreen();
            }else{
                $imgContainer.webkitRequestFullScreen();
            }
        })

    </script>
</body>

示例代码地址

一个封装好的方法库：https://github.com/sindresorhus/screenfull.js

justforuse
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element中screenfull使用方法
qq_41742961的博客
10-11 337
<el-tooltip effect="dark" content="全屏" placement="bottom"> <i class="fullicon el-icon-fullScreen" @click="toggleFullscreen"></i> </el-tooltip> <script> import screenfull from 'screenfull' export default({ ...
HTML5全屏(Fullscreen)API详细介绍
12-13
在越来越真实的web应用程序中,JavaScript也变得越来越给力. FullScreen API 是一个新的JavaScript ...全屏API requestFullscreen方法在一些老的浏览器里面依然使用带前缀形式的方法名,因此可能需要进行检测判断:(带前缀
screenfull.js：用于JavaScript全屏API的跨浏览器使用的简单包装
02-22
screenfull.js 用于JavaScript跨浏览器使用的简单包装，使您可以将页面或任何元素置于全屏状态。 消除浏览器实现上的差异，因此您不必这样做。 该软件包功能齐全。 不会接受任何新功能。 安装 压缩后只有0.7 kB。 下载或。 $ npm install screenfull 也可以在上。 为什么？ 全屏 if ( screenfull . isEnabled ) { screenfull . request ( ) ; } 香草JavaScript document . fullscreenEnabled = document . fullscreenEnabled || document . mozFullScreenEnabled || document . documentElement . webkitRequestFullScreen ; fun
Fullscreen API（全屏操作）
weixin_58414196的博客
09-16 311
Fullscreen API（全屏操作）_w3cschool
useFullscreen 设置全屏效果
最新发布
seapackk的博客
04-12 339
它添加了以全屏模式呈现特定元素（及其后代）的方法，并在不再需要时退出全屏模式。这使得可以使用用户的整个屏幕呈现所需的内容（例如在线游戏），从屏幕上隐藏所有的浏览器用户界面以及其他应用，直到关闭全屏模式。大部分VueUse的函数都返回一个refs对象，可以使用ES6的对象解构语法来获取返回值。useFullscreen函数提供了四个返回值，包括一个响应式变量和三个函数。在阿里矢量图标库图中获取对应的图标，下载svg文件。实现全屏效果，主要是通过插件中。将图标文件放到项目对应的位置。
vue 全屏 screenfull.js 使用及API
consoleloghello的博客
09-27 512
vue 全屏 screenfull.js 使用及API 这里写目录标题vue 全屏 screenfull.js 使用及API一、安装二、使用三、API 一、安装 npm install screenfull --save 二、使用 <template> <div class="btn-fullscreen"> <i class="el-icon-rank" @click="fullScreen()"></i> </div&gt
screenfull.js跨浏览器使用JavaScript Fullscreen API
樊小书生
08-19 9986
screenfull.js是用于跨浏览器使用JavaScript Fullscreen API的简单包装器，可让您将页面或任何元素全屏显示，并且平滑浏览器实现差异，本文只是对封装方法做一个简单的翻译。 github地址：https://github.com/sindresorhus/screenfull.js 。 支持 浏览器支持情况：https://caniuse.com/#feat=...
vue-fullscreen-master.zip
04-19
5. **易用性**：通过Vue的插件机制，安装和使用Vue-fullscreen非常简单，只需几行代码即可。 安装Vue-fullscreen插件通常有以下步骤： 1. 使用npm或yarn添加依赖： ``` npm install vue-fullscreen 或 yarn ...
ueditor-百度可视化编辑器简单使用方法
08-12
**ueditor-百度可视化编辑器简单使用方法** 百度ueditor是一款功能强大的富文本在线编辑器，它提供了丰富的编辑功能，让非技术人员也能轻松创建和编辑网页内容。在本篇文章中，我们将详细介绍ueditor的基本使用方法...
vue-fullscreen-用于全屏的简单Vue组件。-Vue.js开发
05-27
vue-fullscreen用于全屏Live演示的简单Vue.js组件快速示例用法与v-for结合使用modal的中文文档浏览器支持全屏API vue-fullscreen用于v-for的全屏Live演示简单示例Vue.js简短示例与v-for结合的用法模态中文文档浏览器...
jQuery-FullScreen-master 全屏操作
03-26
2. **使用方法**： 要在项目中使用jQuery-FullScreen-master，首先需要引入jQuery库和该插件的脚本文件。然后，可以为任何DOM元素调用`.fullScreen()`方法，使其进入全屏模式；使用`.exitFullScreen()`方法退出全屏...
vue使用screenfull插件实现全屏功能
10-14
主要为大家详细介绍了vue使用screenfull插件实现全屏功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue全屏插件screenfull的使用
myazwj的博客
11-27 907
在我们做项目中会出现要求点击显示全屏的效果，方法如下： screenfull 使用 1.安装 yarn add fullscreen@5.0.0 2.导入import screenfull from 'screenfull' screenfull .toggle() 全屏与非全屏切换 在使用的时候判断浏览器支不支持全屏模式 支持的话就使用插件screenfull .toggle() 全屏与非全屏切换 methods: { // 点击触发全屏的方法 svgClick..
FullScreen
jmunic的专栏
09-24 1143
1： 用于隐藏、显示任务栏、开始菜单、输入面板，BOOL SHFullScreen( HWND hwndRequester,  DWORD dwState)   MSDN里的参考代码：  #include LRESULT CALLBACK SHFullScreenWndProc(HWND hwnd, UINT message, WPARAM wParam
4.vueuse-useFullscreen优雅的使用全屏及退出全屏
weixin_42386379的博客
05-10 2398
vueuse-useFullscreen的使用
VUE项目实现全屏显示功能---screenfull
weixin_45748897的博客
12-30 6269
摘要：使用screenfull 插件 大多数开发项目中都需要全屏显示功能，在vue项目中有比较方便的插件 screenfull。npm地址：https://www.npmjs.com/package/screenfull 点击图标 全屏显示 再次点击退出全屏或者Esc 退出 使用方法 npm install screenfull --save 首先安装 npm install scre...
VUE使用screenfull实现全屏
weixin_44143173的博客
02-29 583
简介 点击某按钮实现页面全屏 按下Esc键退出全屏 IE9以下无需兼容 安装 ### 使用 npm 或 yarn 安装 npm install --save screenfull 使用 ### 1.在需要使用的页面中引入 import screenfull from 'screenfull' ### 2.定义方法实现全屏 clickFullscreen(...
vue 利用 screenfull 实现全屏
m0_50864962的博客
10-10 1812
其实我们可以利用 screenFull 的监听事件, 来实现屏幕的全屏和退出全屏的监听,当然使用原生的api也是可以实现的, 不过代码会显得有点臃肿。有时候我们实现的全屏点击的时候icon图标可以正常切换, 但是如果按 esc 键退出的话就不能监听到退出全屏导致icon展示不正确。
JS API: Fullscreen 全屏 API
超悠閒的博客
11-09 1311
JS API: Fullscreen 全屏 API 文章目录JS API: Fullscreen 全屏 API正文1. 相关 API2. 代码示例2.1 一般用法2.2 封装成钩子2.3 效果其他资源参考连接完整代码示例 正文 今天来介绍一下全屏模式 API 使用 1. 相关 API 属性 Properties 用法 Document.fullscreenElement 当前处于全屏模式的根元素 Document.fullscreenEnabled 检查全屏模式是否可用 方法
通过pywin32调用Windows API，从而实现对windows远程桌面控件的控制的例子
09-27
### 回答1： 可以使用Python的pywin32模块来调用Windows API，从而实现对Windows远程桌面控件的控制。例如，可以使用pywin32的“ win32gui.SendMessage ”函数来发送消息给远程桌面控件，从而控制它们的行为。 ### 回答2： 通过pywin32调用Windows API可以实现对Windows远程桌面控件的控制。下面是一个简单的例子： 首先，需要安装pywin32模块。可以使用pip命令安装：pip install pywin32。 然后，在Python中导入所需的模块： ```python import win32com.client import win32gui import win32process ``` 接下来，通过Windows API获取远程桌面窗口的句柄和进程ID： ```python def get_remote_desktop_window(): # 通过窗口标题查找远程桌面窗口 hwnd = win32gui.FindWindow(None, "Windows 远程桌面") if hwnd != 0: _, process_id = win32process.GetWindowThreadProcessId(hwnd) return hwnd, process_id else: return None, None ``` 然后，使用Windows API进行远程桌面控制： ```python def control_remote_desktop(): hwnd, process_id = get_remote_desktop_window() if hwnd is not None: # 使用Shell.Application创建远程桌面对象 shell = win32com.client.Dispatch("Shell.Application") # 获取远程桌面窗口的控件对象 desktop = shell.Windows().Item(process_id) # 使用控件对象进行相关操作 desktop.FullScreen = True # 进入全屏模式 desktop.ControlType("SendKeys").Application.SendKeys("Hello, World!") # 发送按键消息 ``` 在上述例子中，我们首先通过查找窗口标题为"Windows 远程桌面"的窗口来获取远程桌面窗口的句柄和进程ID。然后使用Shell.Application创建远程桌面对象，并通过控件对象进行相关操作，如进入全屏模式、发送按键消息等。 需要注意的是，以上示例只是对通过pywin32调用Windows API实现对远程桌面控件的控制的一个简单演示，并不包含详尽的远程桌面控制功能。实际应用中，可能需要更多的Windows API调用和错误处理来完善远程桌面控制的功能。 ### 回答3： 通过pywin32库可以调用Windows API来实现对Windows远程桌面控件的控制。远程桌面控件是Windows操作系统中的一个重要组件，允许用户在本地计算机上访问和控制远程服务器或计算机。 下面是一个使用pywin32实现对Windows远程桌面控件的控制的例子： ```python import win32com.client # 创建远程桌面控件对象 rdp = win32com.client.Dispatch("MsTscAx.MsTscAx") # 设置连接参数 rdp.Server = "远程服务器IP地址" rdp.UserName = "用户名" rdp.Domain = "域名" rdp.AdvancedSettings2.ClearTextPassword = "密码" # 连接远程服务器 rdp.Connect() # 等待连接完成 while rdp.Connected != 1: pass # 控制远程桌面 rdp.fullScreen = True # 全屏显示远程桌面 # 将焦点切换到远程桌面 rdp.FullScreenTitle = "远程桌面" rdp.FullScreenMenuBar = False rdp.SecuredSettings2.KeyboardHookMode = 1 rdp.SecuredSettings2.AudioRedirectMode = 0 # 断开连接 rdp.Disconnect() ``` 上述代码首先创建了一个远程桌面控件对象，并通过设置连接参数进行服务器的连接。在连接成功后，可以通过控制远程桌面的相关属性，例如设置全屏显示、切换焦点等。最后，断开与远程服务器的连接。 需要注意的是，使用pywin32调用Windows API时，需要确保已经安装了相应的pywin32库，并且在程序中使用了相应的COM组件的ProgID。 这个例子只是简单展示了pywin32调用Windows API实现对远程桌面控件的控制，实际应用中还可以根据具体需求进行更复杂的操作，例如文件传输、远程命令执行等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值