学习
实践
活动
专区
工具
TVP
写文章

js页面全屏退出全屏

背景   在做前端PC端项目中,我们经常会遇到让页面全屏的需求。大多情况下,这样可以使得用户在该页面更加专注,屏蔽掉该页面之外的干扰。 需求分析 状态判断 事件操作 1. 状态判断 首先,我们需要给出一个默认状态,即非全屏。然后,在此基础上我们进行DOM操作,每次用户进行操作时,我们先判断当前状态,进行相应的操作,操作过后改变当前状态即可。 2. 事件操作 注:下表中 de代表 document.documentElement 操作 浏览器 代码 全屏 W3C de.requestFullscreen 全屏 CHROME de.webkitRequestFullScreen 全屏 FIREFOX de.mozRequestFullScreen 全屏 IE de.msRequestFullscreen 还原 W3C document.exitFullscreen 还原 ; // 判断是否已经是全屏 // 如果是全屏退出 if (this.fullscreen) { if (document.exitFullscreen

2.6K30
  • 广告
    关闭

    热门业务场景教学

    个人网站、项目部署、开发环境、游戏服务器、图床、渲染训练等免费搭建教程,多款云服务器20元起。

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    如何设置PDF全屏动画?PDF怎么全屏放映

    如何给PDF文件设置全屏动画?顾名思义全屏动画及时文件在全屏的状态下进行页面的切换或者展示一些其他的特效,这样的文件其实能够有效的吸引读者的眼球。 下面小编就来为大家介绍设置PDF全屏动画的方法,一起来看: 参考工具:迅捷PDF编辑器 方法: 1:首先我们需要打开安装在电脑中的PDF编辑器,然后把PDF文件添加进去。 2:文件打开后,点击PDF编辑器菜单栏中的文档选项,然后选择文档选项中的更多页面选项,然后点击全屏动画工具。 5:动画效果设置好后,就可以设置全屏播放了。点击菜单栏中的视图选项,然后选择视图选项中的全屏模式。点击之后,就可以全屏播放了哦。 7:在设置工具中也有挺多的PDF文件编辑工具,然后点击其中的更多页面中的全屏动画进行设置;剩下的就跟上面的是一样的了。 ​ PDF设置全屏动画的方法大家记下来了嘛?

    1.2K30

    EasyPlayerPro-win配置全屏模式不能全屏是为什么

    最近遇到一个项目团队是做全景视频播放的,希望用EasyPlayerPro做一个客户端程序,但是在调试DEMO的时候遇到一个问题,即配置了全屏模式后,视频只能出现在窗体左上角。 但是就算如此,也不应该在本应全屏的时候不能全屏显示,最终只能回归到检查代码。 WS_BORDER | WS_CAPTION | WS_SYSMENU, WS_CHILD); // 去掉边框 ModifyStyleEx(WS_EX_DLGMODALFRAME, 0); //窗口位置大小保持原来不变 SW_NORMAL); //ShowWindow(SW_MAXIMIZE);//不能再使用最大化,此最大化只是针对当前屏幕最大化 拓展 EasyPlayerPro虽然支持了几乎所有的流媒体协议,但是在很多场景需求下面 (例如:SDK包大小,自定义协议,数据加密),EasyPlayerPro的定制成本比较高,灵活程度没有EasyPlayer-RTSPEasyPlayer-RTMP专用播放器的灵活程度高,EasyPlayerPro

    31230

    JavaScript网页全屏API

    在大多数的浏览器中都有实现网页全屏显示的功能,并且大部分浏览器实现全屏显示退出全屏显示的快捷键通常是F11Esc两个按键。 进入全屏退出全屏的方法: 进入全屏:element.requestFullscreen() 退出全屏:document.exitFullscreen() 当然这是W3C标准中的使用方法,在各浏览器使用中有所不同 因此在这里引用博客文章——html5实现全屏的api方法中的使用心得: 1)在safarichrome下,全屏后的元素全自动全屏居中,且背景色变为黑色。 如果给body调全屏,在webkit内核的浏览器下按11进入的全屏效果差得很远,主要是背景色问题,而firefox下则效果接近于f11全屏——当然还是有区别,比如进入全屏的动画过程就不相同。 3)onFullScreenChange事件的回调,在safari里不能写alert,如果写alert,点击后会自动退出全屏

    1.5K50

    扫码关注腾讯云开发者

    领取腾讯云代金券