首页
学习
活动
专区
圈层
工具
发布

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

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

    纯血鸿蒙APP实战开发——全屏登录页面

    介绍本例介绍各种应用登录页面。全屏登录页面:在主页面点击跳转到全屏登录页后,显示全屏模态页面,全屏模态页面从下方滑出并覆盖整个屏幕,模态页面内容自定义,此处分为默认一键登录方式和其他登录方式。...效果图预览使用说明点击主页面按钮"点击跳转到全屏登录页",显示全屏模态页面。不选中"阅读并同意服务协议及个人信息处理规则",点击一键登录,提示"请先阅读并同意协议";选中则提示"登录成功"。...点击左下方"其他登录方式",页面中显示其他登录方式页面。...在手机号输入框输入11位数字后,"发送短信验证码"按钮由灰变蓝,选中"阅读并同意服务协议及个人信息处理规则",点击"发送短信验证码"按钮,提示"验证码已发送"。...实现思路本例涉及的关键特性和实现方案如下:通过bindContentCover组件绑定全屏模态页面,模态页面内容通过@Builder装饰器 自定义。

    30420

    andriod使用超级播放器全屏时部分手机会出现白边或不能全屏

    全屏指的是播放画面view最大化,通过把状态栏隐藏或透明; 所以超级播放器在实现全屏的时候也是有对状态栏做处理; 当自己的项目也是有做沉浸式开发状态栏时看能会跟超级播放器的逻辑有冲突; image.png...会一直保持全屏模式。显示切换时也会触发View.OnSystemUiVisibilityChangeListener。...还有一个区别就是 ,全屏模式时, 从原本状态栏或者虚拟按键的位置 响屏幕内部滑动, 会清除SYSTEM_UI_FLAG_HIDE_NAVIGATION和SYSTEM_UI_FLAG_FULLSCREEN...解决办法 1.部分有黑(白)边的手机用我们的dmeo是否也会有同样问题? 2.检查一下自己项目的沉浸式状态栏逻辑,注释掉试一下,或者把我们的代码逻辑注释掉调试一下

    2.7K60

    PHP压缩html页面

    将html页面压缩之后,可以大大提升页面的加载速度,下面的压缩代码去掉了页面中的所有空格、注释、制表符、换行符等等比较多余的字符,下面的代码是写以在thinkphp5中为例的,不过在他PHP程序是通用的...1、找到thinkphp5框架中的框架View类(/think/library/response/View.php),修改类中的output方法,代码如下:     /**      * 处理数据      ...,下面这段代码对PHP通用,可以进行自定义扩展封装          * 如果要使用压缩,请将IS_PAGE_ZIP定义在公共加载的文件中          * */         if(defined...php echo ', $outputHtml)));         }                  return $outputHtml;     } 2、在页面公共部分或者你需要使用页面压缩的模块设置一个宏变量进行标记...,我的如下     //设置开启页面压缩,true为开启页面压缩,false相反     define('IS_PAGE_ZIP', false); 3、最后压缩后的效果如下图:

    9.6K10

    使用weinre调试手机页面

    功能与Firebug及chrome调试器类似,可以帮助我们即时更改页面元素、样式,调试JS等。 工作原理 ?...待调试的页面。你需要在页面中嵌入一小段js。它将通过XHR方式与debug server通信,进行调试信息的收发。 安装 安装十分方便。以linux机器为例,首先你需要有node.js。...假设我们要调试的页面运行在10.136.30.144:3927 页面中引入js后,用手机浏览器打开待调试页面 http://10.136.30.144:3927/new 4....开始调试 手机访问页面后,我们回到步骤2中所说的调试界面。发现此时,targets中多了一条,即是我们在步骤3中用手机打开的待调试页面。 ?...用手机连续访问多页面,这些页面都会在targets中列出,选中其中一个,即可进行调试。 2. 点击调试页面中的remote, 可以从调试页面切回targets列表。 3.

    1.4K30
    领券