js 控制浏览器 实现全屏 和 退出全屏功能
在工作中我们偶尔遇到不需要浏览器导航栏和标题栏,需要将整个项目全屏展示的情况,虽然有一些快捷键可以实现此效果,但我们更希望项目中有类似的功能,可以让用户任意切换。
1、js 功能处理
//本案例只为演示打开全屏 和 退出全屏功能,具体交互根据需求自行完善
<template>// v3 可以不用外层div<div><button @click="fullClick">打开全屏</button><button @click="exitfull">退出全屏</button></div></template><script setup>
// js 部分const screenFull = (e) => {if (e.requestFullscreen) {e.requestFullscreen();} else if (e.mozRequestFullScreen) {e.mozRequestFullScreen();} else if (e.webkitRequestFullscreen) {e.webkitRequestFullscreen();} else if (e.msRequestFullscreen) {e.msRequestFullscreen();}};// 退出全屏const exitfull = () => {var exitMethod =document.cancelFullScreen ||// document.webkitCancelFullScreen ||document.mozCancelFullScreen ||document.exitFullScreen;if (exitMethod) {exitMethod.call(document);} else if (window.ActiveXObject) {var wscript = new ActiveXObject('WScript.Shell');if (wscript != null) {wscript.SendKeys('{F11}');}}};// 打开全屏const fullClick = () => {screenFull(document.documentElement);};</script>
2、手动操作处理
谷歌浏览器Chrome
右上角菜单—设置—外观–隐藏书签栏
2、快捷键
Mac电脑 快捷键:command + shift + f
Windows: 按F11键
火狐浏览器 Firefox
1、全屏模式下–点击工具栏—右键—选择隐藏工具栏
2、如果标题栏还存在的话----command + shift + b
js 控制浏览器 实现全屏 和 退出全屏功能相关推荐
- python退出全屏_实现网页全屏和退出全屏JS代码,多浏览器兼容
js全屏和退出全屏代码|www.125jz.com 全屏显示 退出全屏 function requestFullScreen(element) { // 判断各种浏览器,找到正确的方法 var req ...
- js实现浏览器的全屏和退出全屏
js实现浏览器的全屏和退出全屏 关于更多日常使用的公共类的操作方法,可以关注下小滑轮网站 /*** 全屏*/let toFullScreen = () => {let el = document ...
- js实现浏览器全屏与退出全屏,解决chrome下F11进入全屏后退出全屏API方法失效
1. 问题说明 网页全屏和退出全屏其实已经算的上一个很常见的功能了,那是不是直接用HTML5全屏API就没什么问题了,但是不要忘了键盘上的F11有着同样的功能,实际使用的时候就发现F11使网页进入全屏 ...
- js浏览器全屏与退出全屏, window.open
官方文档 // 设置全屏对象,可以为div/img let element = document.documentElement; // 判断是否为支持ActiveXObject,IE支持,此方法为按 ...
- js 控制网页全屏及退出全屏
网上找了好多资料,基本大同小异,实际效果会出现IE不兼容的现象(全屏和退出全屏都失效), 后来解决了,记录如下: function requestFullScreen(element) {var do ...
- linux控制台则怎么退出全屏,JS 全屏和退出全屏详解及实例代码
JS 全屏和退出全屏 js实现浏览器窗口全屏和退出全屏的功能,市面上主流浏览器如:谷歌.火狐.360等都是兼容的,不过IE低版本有点瑕疵(全屏状态下仍有底部的状态栏). 这个demo基本是够了,直接复 ...
- esc键退出全屏 vue_vue中实现浏览器全屏与退出全屏功能
在 标签中主要是放一个全屏与退出全屏的按钮,并绑定上点击事件 fullScreenClick .全屏与退出全屏的按钮显示切换是通过变量 fullScreen 控制的. :content="f ...
- vue中浏览器全屏和退出全屏
1.首先要判断浏览器类型 (是否IE),来控制是否展示功能,在计算属性中判断: computed: {showFullScreenBtn () {return window.navigator.use ...
- JS实现全屏和退出全屏
JS实现全屏和退出全屏 //全屏 function fullScreen(){var el = document.documentElement;var rfs = el.requestFullScr ...
最新文章
- php拉查询封装,php实现搜索类封装示例
- Golang gorouting 并发控制 sync.WaitGroup 介绍与使用
- oracle手工收集awr报告_WHAT——什么是AWR?
- python基础(文件、异常、模块、类、对象)
- form怎么加ion_企业微信裂变该怎么做?一份裂变1000+社群裂变方案的底层逻辑
- 【原】文本挖掘——特征选择
- 2019腾讯广告算法初赛第一名的模型
- 鼠标悬浮显示文字的简单方法
- 发那科程序全部输出_发那科CF卡程序输入输出方法
- 华光职业学院计算机专业,关于给予张庆俊等同学省高校计算机一级 考试成绩优秀奖励的通知...
- 音王点歌系统怎么连接服务器,KTV音响设备怎么连接?点歌机怎么连接?学习下...
- 网友自曝取公积金血泪史 给你点希望又让你绝望
- 关于ImportError: No module named ‘tensorflow‘报错的解决
- 七夕节给男朋友买什么礼物比较好呢?2022年七夕礼物推荐
- 蓝牙(二)A2DP协议
- mysql基本数据类型、笔试题(2018-9-10)
- 逆袭:2012互联网盘点
- java编程:设计一个动物声音“模拟器”,希望模拟器可以模拟许多动物的叫声
- Ubuntu18.04设置主题后,切换用户或锁定就自动休眠(待解决)
- 科技爱好者周刊(第 144 期):提高收入的根本途径
热门文章
- 2020年ECCV论文DeepSFM: Structure From Motion Via Deep Bundle Adjustment阅读笔记
- navidia和amd显卡性能排行,不知道年份,暂时找到这个。仅供参考
- mp4视频格式转换器工具,万兴优转-多功能视音频处理软件
- Spring Boot项目实践-员工管理系统 删除 注销 404 (9)
- 零基础学PS平面设计基础有哪些?
- Poloniex加密货币交换泄露数据,建议数据安全从SSL证书做起
- Hubble Zhang的学习日记(第十二周)
- macbook卡在进度条开不了机_我的mac 开机后卡在进度条 没法开机
- 网关 - 智能网联汽车的“核心器官”
- Android实现屏蔽微信拉黑和删除联系人功能