JavaScript点击进入全屏和退出全屏 向右看齐 2021-09-22 01:01 446阅读 0赞 ### 目录 ### * 效果图 * 核心代码 * 完整案例 # 效果图 # ![点击进入全屏][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70] # 核心代码 # // 检测当前是否全屏 function isFullScreen() { var isFull = !!(document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement || document.fullscreenElement); return isFull; }; // 退出全屏 function exitFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } }; // 进入全屏 function handleFullScreen(element) { console.log(element, "element"); if (element.requestFullscreen) { console.log(1); element.requestFullscreen(); } else if (element.mozRequestFullScreen) { console.log(2); element.mozRequestFullScreen(); } else if (element.webkitRequestFullscreen) { console.log(3); element.webkitRequestFullscreen(); } else if (element.msRequestFullscreen) { console.log(4); element.msRequestFullscreen(); } }; # 完整案例 # <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>点击全屏</title> </head> <style> .fullBox { width: 600px; height: 400px; padding: 100px; text-align: center; margin: 30px auto; background-color: pink; box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09); } .btn { font-size: 20px; } </style> <body> <div id="box" class="fullBox"> Hello World 点击我试试 <button id="btn" class="btn" onclick="handleClick(event)">进入全屏</button> </div> <script> // 监听窗口大小 window.onresize = function () { var isFull = isFullScreen(); const btn = document.getElementById("btn"); if (isFull === false) { btn.innerHTML = "进入全屏"; } else { btn.innerHTML = "退出全屏"; } }; const handleClick = (e) => { const el = e.target; // 检测当前是否是全屏状态 var isFull = isFullScreen(); if (isFull) { el.innerHTML = "进入全屏"; exitFullscreen(); } else { el.innerHTML = "退出全屏"; const box = document.getElementById("box"); handleFullScreen(box); } }; // 检测当前是否全屏 function isFullScreen() { var isFull = !!(document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement || document.fullscreenElement); return isFull; }; // 退出全屏 function exitFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } }; // 进入全屏 function handleFullScreen(element) { console.log(element, "element"); if (element.requestFullscreen) { console.log(1); element.requestFullscreen(); } else if (element.mozRequestFullScreen) { console.log(2); element.mozRequestFullScreen(); } else if (element.webkitRequestFullscreen) { console.log(3); element.webkitRequestFullscreen(); } else if (element.msRequestFullscreen) { console.log(4); element.msRequestFullscreen(); } }; </script> </body> </html> [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70]: /images/20210920/b69fd7f98a124c339f09e0175815ba9f.png
还没有评论,来说两句吧...