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

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

实现网页全屏和退出全屏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

网页制作

第3课：颜色与背景

本课，你将学习如何在网站上应用颜色与背景。我们还会介绍用于定位和控制背景图像的高级方法。

江山如画
2020年2月22日
5.5K03
网页制作

CSS 实现水平、垂直居中布局代码大全

CSS实现水平居中若是行内元素，则直接给其父元素设置text-align: center即可若是块级元素，则直接给该元素设置margin: 0 auto即可若子元素包含浮动元素，则给父元素设置width:fit-content并且配合margin .parent { width: -webkit-fit-content; width: -moz-fit…

江山如画
2019年11月26日
10.7K00
网页制作

巧用边框线实现立体按钮效果（纯CSS）

本文教你使用CSS制作立体按钮，代码简单。

江山如画
2020年2月2日
7.6K00
网页制作

导航特效：jquery实现当前（活动）菜单样式变化

用户点击导航或菜单上不同的栏目，被选中的导航栏目会变换样式，出现图片或背景颜色的变化，用于标识是否是当前栏目或活动选项。本教程使用jquery实现导航菜单当前（活动）菜单样式变化，导航菜单模式用的是背景颜色，你可以换成背景图片以符合建站需要。当前（活动）菜单样式变化实现原理在html代码中给首页（默认选中）加上class名cur <a href=…

江山如画
2018年2月8日
5.0K00
网页制作

两个iframe自适应高度的解决方法

很多小伙伴在做网站的时候对于解决iframe的高度问题都是很头大的一件事，今天吾爱编程为大家介绍一下iframe自适应高度的方法，有需要的小伙伴可以参考一下： 1、需求分析：使页面中的iframe可以自适应高度，避免页面高度增加的时候页面和iframe会同时出现滚动条。 2、方法一：在iframe上面直接加onload的方法，使其自适应 <ifra…

江山如画
2021年3月16日
3.1K00
网页制作

跟永哥学HTML5（2）：html5与html4的区别

我们现在web前端开发的网页，一般都是html4.0。很多以前学过HTML 4.0的朋友可能此时会感到很迷惑，html 4.0和HTML5有什么区别? hmtl5与html4的区别？先来看看HTML5推出的理由：解决Web浏览器间的兼容性问题在一个浏览器中可以运行的HTML、Css、Javascript，在另一个浏览器中不能运行。原因：各浏览器规范不统…

江山如画
2018年1月21日
3.7K00

发表回复

登录后才能评论