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

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

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

网页制作

网页中的框架（详解）

所谓框架便是网页画面分成几个框窗，同时取得多个 URL。一、制作框架页面的步骤： 1.编写所有子框架页面2.编写主框架页面3.在主框架页面中设定子框架名称4.如果框架页面之间存在链接，在子框架中设定链接。注意：框架页面是不含标签的二、基本语法 <frameset> <frame src=”url”> <noframes&g…

江山如画
2020年4月11日
14.3K02
网页制作

一句代码给图片加倒影-CSS3

本文使用纯CSS代码给图片加倒影，CSS代码： img { -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1))); } 效果如下图所示：完整代码： &lt…

江山如画
2019年8月18日
6.3K00
网页制作

CSS的浮动及清除浮动的5种方法

css属性float：left/right/none 左浮动/右浮动/不浮动（默认），文章介绍了清除浮动的5种方法，并指出其实现原理、优缺点和使用建议。

江山如画
2019年11月5日
6.2K00
网页制作

第1课：CSS是什么？

CSS是Cascading Style Sheets (CSS) 是一门指定文档该如何呈现给用户的语言。，用于为HTML文档定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。

江山如画
2020年2月22日
5.6K06
网页制作

div+css制作上中下，中间两列的全屏自适应布局

制作自适应布局的网页对初学者是个难点，今天我们以最常见的上中下结构，中间又分为两列的全屏自适应布局为例，教大家如何制作自适应布局网页。上中下结构，中间又分为两列的全屏自适应布局HTML代码： <div class=”g-hd”></div> <div class=”g-sd”></div> <div c…

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

Less编写及使用快速入门

前面我们学习了《4个案例入门，学会LESS使用》，今天一起来学习如何编写，编译并使用LESS LESS的编写 LESS的使用是很容易的，使用你最常使用的代码编辑器，按LESSCSS的语法规则写好.less文件，接下来，使用编译工具它编译成.css，最后再引入页面即可。 LESS的编译 GUI编译工具为方便起见，建议初学者使用GUI编译工具来编译.less文…

江山如画
2019年7月17日
7.4K01

发表回复

登录后才能评论