实现网页全屏和退出全屏JS代码，多浏览器兼容

江山如画 • 2019年2月15日下午1:55 • 网页制作 • 阅读 4457

实现网页全屏和退出全屏JS代码，兼容主流浏览器如：谷歌、火狐、360等。

<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js全屏和退出全屏代码|www.125jz.com</title> <body>  <button onclick="requestFullScreen(document.documentElement)">全屏显示</button> <button onclick="exitFull()">退出全屏</button> </body> <script type="text/javascript"> function requestFullScreen(element) { // 判断各种浏览器，找到正确的方法 var requestMethod = element.requestFullScreen || //W3C element.webkitRequestFullScreen || //Chrome等 element.mozRequestFullScreen || //FireFox element.msRequestFullScreen; //IE11 if (requestMethod) { requestMethod.call(element); } else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer var wscript = new ActiveXObject("WScript.Shell"); if (wscript !== null) { wscript.SendKeys("{F11}"); } } } //退出全屏判断浏览器种类 function exitFull() { // 判断各种浏览器，找到正确的方法 var exitMethod = document.exitFullscreen || //W3C document.mozCancelFullScreen || //Chrome等 document.webkitExitFullscreen || //FireFox document.webkitExitFullscreen; //IE11 if (exitMethod) { exitMethod.call(document); } else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer var wscript = new ActiveXObject("WScript.Shell"); if (wscript !== null) { wscript.SendKeys("{F11}"); } } } </script> </html>

Tips:You can change the code before run.

还可以根据注释，实现整个网页进入全屏，还是指定某块区域全屏（根据区域ID指定），快来试试吧。

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/3262.html

赞 (0)

江山如画管理团队

微信扫一扫

微信扫一扫

支付宝扫一扫

支付宝扫一扫

js实现进度拖拽的效果-调节音量

上一篇 2019年2月15日下午1:48

jquery动态新增元素节点.click点击事件失效的2个解决方法

下一篇 2019年2月16日下午9:19

网页制作

iframe中子页和父页面如何传值

本文介绍了，父页面father.html和子页面son.html之间如何传值，子页面如何调用父页面中的函数等操作

江山如画
2021年11月30日
5.0K00
网页制作

第15课：用z-index进行层次堆叠

CSS可以处理高度、宽度、深度三个维度。在前面的课程中，我们已经了解了前两个维度。在本课中，我们将学习如何令不同元素具有层次。简言之，就是关于元素堆叠的次序问题。为此，你可以为每个元素指定一个数字（z-index）。其原理是：数字较大的元素将叠加在数字较小的元素之上。比方说，我们正在打扑克，并且拿了一手同花大顺。我们可以通过为各张牌设定一个z-index…

江山如画
2020年2月25日
5.9K03
网页制作

第15课：最后提示

祝贺！你已经进入最后一课了！我已经学到全部知识了？如果你已经学完以上教程，恭喜你，你已经学到了很多关于HTML的知识，并且完全有能力创建自己的网站！不过，你所学到的只是基础知识，还有许多内容需要掌握。但是你已经为进一步学习打下了坚实的基础。在最后这一课中，我们将给予一些最后提示：首先，在HTML文档中，应保持正确的顺序与结构。令你的HTML文档具有良…

江山如画
2018年1月18日
5.9K01
CSS border-radius 深入学习（含可视化生成工具）

没有学过CSS border-radius 的同学，请阅读《css实现圆角矩形、半圆、圆形效果—border-radius使用详解》一文。border-radius 写法： .box{ border-radius: 30%; /* 也可以用PX代替 */ } 矩形的四角会变为相应数值的圆角，如下图：只输入一个数值，所有角都会被四舍五入，若要固定值可以使用 …

江山如画
2019年10月17日 • 网页制作
9.0K00
网页制作

实现表格单线边框的两种方法

实现表格单线边框方法一 border-collapse: collapse; 代码如下： See the Pen 实现表格单线边框的两种方法 by 江山如画 (@jgyzhr)on CodePen. 实现表格单线边框方法二给table上边和左边设上边框线，给td下边和右边设上边框线 See the Pen 实现表格单线边框方法二 by 江山如画 (@jgy…

江山如画
2019年10月31日
8.5K00
CSS图形绘制练习-最常见的40种形状和图形源码分享

CSS3可以实现很多漂亮的图形，本文从互联网收集了最常见的40种形状和图形，现分享给大家。包括圆形，椭圆形，三角形，倒三角形，左三角形，右三角形，菱形，梯形，长方形，正方形，圆环，平行四边形，五角星，六角星，五边形，六边形，八边形，心形，蛋形，无穷符号，消息提示框，钻石，八卦图，食豆人，扇形，月牙，顶左直角三角形，顶右直角三角形，底左直角三角形，底右…

江山如画
2020年2月22日 • 网页制作
12.1K00

发表回复

登录后才能评论