js - 全屏/取消全屏

深碍√TFBOYSˉ_ 2022-11-25 05:23 290阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style> body{ background-color: #fff; color: #74f852; } </style>
    </head>
    <body>
      <a href="javascript:;">点击- 进入全屏</a>
      <p >点击 - 退出全屏</p>
      <script> document.querySelector("a").addEventListener('click',function(){ toFullScreen() /** * 进入全屏 */ function toFullScreen() { let aa = document.body; aa.webkitRequestFullScreen ? aa.webkitRequestFullScreen() : aa.mozRequestFullScreen ? aa.mozRequestFullScreen() : aa.msRequestFullscreen ? aa.msRequestFullscreen() : aa.requestFullScreen ? aa.requestFullScreen() : alert("浏览器不支持全屏"); } }) document.querySelector("p").addEventListener('click',function(){ exitFullscreen() /** * 退出全屏 */ function exitFullscreen() { let pp = parent.document; pp.webkitCancelFullScreen ? pp.webkitCancelFullScreen() : pp.mozCancelFullScreen ? pp.mozCancelFullScreen() : pp.cancelFullScreen ? pp.cancelFullScreen() : pp.msExitFullscreen ? pp.msExitFullscreen() : pp.exitFullscreen ? pp.exitFullscreen() : alert("退出失败,可尝试Esc退出"); } }) </script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，290人围观）

还没有评论，来说两句吧...

相关阅读

相关 js实现全屏和退出全屏功能

主要是全屏和退出全屏事件，以及相应的操作（采用window.onresize监测） $(function(){ //全屏 $("fu

迈不过友情╰/ 2023年06月14日 04:23/ 0 赞/ 37 阅读

相关 js 页面全屏

//该方法要有点击事件触发才能实现全屏效果 function launchFullScreen(element) { / 处理全屏/

﹏ヽ暗。殇╰゛Y/ 2023年01月03日 01:21/ 0 赞/ 241 阅读

相关 vue 全屏和退出全屏

html源码： <div id="allScreen" @click="showScreen" > <div >全屏内容 </div>

Dear 丶/ 2022年12月06日 15:48/ 0 赞/ 318 阅读

相关 js - 全屏/取消全屏

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

深碍√TFBOYSˉ_/ 2022年11月25日 05:23/ 0 赞/ 291 阅读

相关 React-全屏、取消全屏及自适应防抖处理

文章目录前言一、html部分二、ts/js 1.全屏事件 2.取消全屏及防抖处理 ------------------

た入场券/ 2022年10月17日 01:46/ 0 赞/ 343 阅读

相关 JS 全屏代码

// 判断各种浏览器，找到正确的方法 function launchFullscreen(element) { if(element.request

小灰灰/ 2022年08月13日 12:40/ 0 赞/ 237 阅读

相关 Android 切换全屏,取消全屏

切换全屏,取消全屏 / 切换全屏,取消全屏 @param isChecked / private void

你的名字/ 2022年06月13日 04:12/ 0 赞/ 337 阅读

相关全屏

JavaScript控制浏览器全屏 css代码 <style> html,body { padding: 0; margin: 0; height: 100%;

旧城等待，/ 2022年05月31日 12:05/ 0 赞/ 302 阅读

相关 html js让元素全屏和取消全屏显示

先获取到元素节点，然后设置全屏即可，这里我是用vue获取的，videoDom就是dom节点，用原生js获取的也是一样的 let videoDom = this.$

痛定思痛。/ 2022年02月26日 11:44/ 0 赞/ 701 阅读

相关原生js实现浏览器全屏和退出全屏

全屏模式 //W3C if (docElm.requestFullscreen) { docElm.requestFullscreen(

爱被打了一巴掌/ 2021年12月24日 19:41/ 0 赞/ 422 阅读