js浏览器全屏与退出全屏, window.open
官方文档
// 设置全屏对象,可以为div/img
let element = document.documentElement;
// 判断是否为支持ActiveXObject,IE支持,此方法为按下F11
if (typeof window.ActiveXObject != "undefined") { /* eslint-disable no-undef */let wscript = new ActiveXObject("WScript.Shell");if (wscript != null) {wscript.SendKeys("{F11}");}
} else {
// 设置浏览器全屏,此方法会导致全屏后上传图片退出,目前未发现解决方案if (element.requestFullscreen) {element.requestFullscreen()} else if (element.msRequestFullscreen) {element.msRequestFullscreen()} else if (element.mozRequestFullScreen) {element.mozRequestFullScreen()} else if (element.webkitRequestFullscreen) {element.webkitRequestFullscreen()}
// 元素全屏改变监听element.addEventListener('fullscreenchange', (event) => {if (!document.fullscreenElement) {// 退出全屏后}});
// 退出全屏exitFullscreen () {if (document.exitFullScreen) {document.exitFullScreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.webkitExitFullscreen) {document.webkitExitFullscreen();} else if (document.msExitFullscreen) {document.msExitFullscreen();}},
全屏css
.div{position: fixed!important;object-fit: contain;top: 0 !important;right: 0 !important;bottom: 0 !important;left: 0 !important;min-width: 0 !important;max-width: none !important;min-height: 0 !important;max-height: none !important;width: 100% !important;height: 100% !important;transform: none !important;margin: 0 !important;
}
css伪类:fullscreen应用于当前处于全屏显示模式的元素
#fullscreen:fullscreen {padding: 42px;background-color: pink;border:2px solid #f00;font-size: 200%;
}
window.open()新窗口
window.open("url", 'self', "fullscreen,scrollbars, left=0") 'self' 弹出窗口的名字(不是文件名),非必须,可用空''代替; height=100 窗口高度; width=400 窗口宽度; top=0 窗口距离屏幕上方的象素值 left=0 窗口距离屏幕左侧的象素值 toolbar=no 是否显示工具栏 menubar,scrollbars 表示菜单栏和滚动栏 resizable=no 是否允许改变窗口大小 location=no 是否显示地址栏status=no 是否显示状态栏内的信息(通常是文件已经打开)fullscreen 是否全屏yes为true ,no为false
js浏览器全屏与退出全屏, window.open相关推荐
- python退出全屏_实现网页全屏和退出全屏JS代码,多浏览器兼容
js全屏和退出全屏代码|www.125jz.com 全屏显示 退出全屏 function requestFullScreen(element) { // 判断各种浏览器,找到正确的方法 var req ...
- js 控制浏览器 实现全屏 和 退出全屏功能
在工作中我们偶尔遇到不需要浏览器导航栏和标题栏,需要将整个项目全屏展示的情况,虽然有一些快捷键可以实现此效果,但我们更希望项目中有类似的功能,可以让用户任意切换. 1.js 功能处理 //本案例只为演 ...
- js实现浏览器的全屏和退出全屏
js实现浏览器的全屏和退出全屏 关于更多日常使用的公共类的操作方法,可以关注下小滑轮网站 /*** 全屏*/let toFullScreen = () => {let el = document ...
- js实现浏览器全屏与退出全屏,解决chrome下F11进入全屏后退出全屏API方法失效
1. 问题说明 网页全屏和退出全屏其实已经算的上一个很常见的功能了,那是不是直接用HTML5全屏API就没什么问题了,但是不要忘了键盘上的F11有着同样的功能,实际使用的时候就发现F11使网页进入全屏 ...
- JS实现全屏和退出全屏
JS实现全屏和退出全屏 //全屏 function fullScreen(){var el = document.documentElement;var rfs = el.requestFullScr ...
- js实现全屏与退出全屏,解决F11进入全屏后退出全屏API方法失效(chrome)
js实现全屏与退出全屏,解决F11进入全屏后退出全屏API方法失效(chrome) 解决的问题 谷歌浏览器F11全屏后,在页面中编写的全屏按钮失效 解决方法 //判断是否是全屏状态 var isFul ...
- 退出全屏html,js全屏和退出全屏代码范例
js实现浏览器窗口全屏和退出全屏的功能,市面上主流浏览器如:谷歌.火狐.360等都是兼容的,不过IE低版本有点瑕疵(全屏状态下仍有底部的状态栏). 这个demo基本是够了,直接复制下面的源码另存为ht ...
- linux控制台则怎么退出全屏,JS 全屏和退出全屏详解及实例代码
JS 全屏和退出全屏 js实现浏览器窗口全屏和退出全屏的功能,市面上主流浏览器如:谷歌.火狐.360等都是兼容的,不过IE低版本有点瑕疵(全屏状态下仍有底部的状态栏). 这个demo基本是够了,直接复 ...
- esc键退出全屏 vue_vue中实现浏览器全屏与退出全屏功能
在 标签中主要是放一个全屏与退出全屏的按钮,并绑定上点击事件 fullScreenClick .全屏与退出全屏的按钮显示切换是通过变量 fullScreen 控制的. :content="f ...
最新文章
- 云计算的下一站:Serverless的2020发展前瞻!
- mysql的主从复制原理与实现
- 【linux开发】IO端口和IO内存的区别及分别使用的函数接口
- 源码 反码 补码详解(为什么计算机存储数值为补码形式?)
- 测试并发应用(七)配置Eclipse来调试并发代码
- 解决 【xshell 5 不能使用退格键和Delete建】的问题
- 如何安装指定版本的 SAP Spartacus
- React-引领未来的用户界面开发框架-读书笔记(二)
- Android功耗优化(6)---如何确定阻止进入suspend的原因
- bootstrap datetimepicker 复选可删除,可规定指定日期不可选
- Python——腾讯笔试编程题(函数练习)
- tensorflow之修改数组的值
- JavaWeb学习笔记
- 12306 抢票 python + selenium + chrome (一) 搜索和参考
- 安卓实现APP自动检测软件版本并提示更新
- 一个人不自信有多可怕?
- 精美素材:10套最新出炉的免费扁平图标下载
- 缓存之王 | Redis最佳实践开发规范FAQ
- Tianchi×Datawhale 零基础信贷模型预测 task04
- HBuilder开发App教程06-首页