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

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

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

网页制作

vue学习v-on:click绑定HTML的单击事件

v-on:click缩写为@click <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title>125jz.com-vue</title> <script src=”js/vue.js” type=”text/ja…

江山如画
2020年6月14日
6.1K01
网页制作

手把手，永哥教你学会css sprite（雪碧图）技术

css sprite又称雪碧图或css精灵。雪碧图就是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上，使用雪碧图只需要引用一张图片，对内存和带宽更加友好。 css sprite优点：有效减少网站的http请求数量，加…

江山如画
2018年2月20日
11.4K00
网页制作

第5课：文本

文本的显示格式与式样对于网页设计师来说是一个重要问题。这一课将向你介绍CSS在文本布局方面令人激动的特性。本课将对下列CSS属性进行讲解： text-indent text-align text-decoration letter-spacing text-transform 文本缩进[text-indent] CSS属性text-indent用于为段落设置…

江山如画
2020年2月22日
8.7K04
网页制作

css布局基础-盒子模型

网页设计的第一步就是设计版面布局，本文介绍了css布局基础-盒子模型，CSS盒模型是描述网页布局的视觉模型中网页元素的矩形盒状模型。盒模型由margin（边界）、border（边框）、padding（填充）和content（内容）4部分组成。

江山如画
2022年7月14日
8.8K00
网页制作

第8课：如何做各种超链接？

在这一课，你将学习如何在网页之间做超链接。如何做超链接？做链接只需一个元素<a>和一个属性href就行了。下面是一个例子，它是一个指向www.125jz.com的链接：例1： <a href=”http://www.125jz.com/”>指向www.125jz.com的链接</a> 该例在浏览器中将显示如下：指向…

江山如画
2018年1月20日
6.7K011
网页制作

菜单或新闻列表最后一项的css处理小技巧:not(:last-of-type)

网页开发时，导航菜单的最后一项或新闻列表的最后一项需要和前面其他项显示不同，如导航的最后一个菜单不再需要分隔符或右边的空白间距，新闻或文章列表的最后一项不需要底边距，列表一般都会有分割线，但是最后一个列表没有分割线等。如文章列表如下： <ul class=’posts’> <li class=’post’> <h3>中国…

江山如画
2018年9月27日
3.5K00

发表回复

登录后才能评论