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

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

实现网页全屏和退出全屏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实现进度拖拽的效果-调节音量

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

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

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

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

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

网页制作

中国省、市区二级联动下拉选择框-JS源码

中国省、市区二级联动下拉选择框，包含所有省份及市县信息。当选择省份下拉选择框时，市区的下拉框会根据选择的省市加载出来。如上图所示选择“山东省”，市的下拉选择框只会出现山东省的市县。 1.把中国省份和市区的信息放到JavaScript文件里（js/common.js），中国网页设计在js文件里定义了两个数组，分别存放省份和对应的市区。 //省份 var pr…

江山如画
2019年6月5日
10.1K01
网页制作

HTML5+CSS3制作网页实例：HTML5入门

文章最后提供HTML5+CSS3制作网页实例源码下载。步骤1 -设计设计师先根据构想使用PHOTOSHOP设计页面，然后开始HTML和CSS编码,从设计背景、颜色和字体,细节部分的工作内容。步骤2 – HTML 头部html代码 <!DOCTYPE html> <html> <head> <meta…

江山如画
2019年3月7日
18.7K02
网页制作

3种纯CSS/jquery实现的表格隔行变色，鼠标悬停：hover变色效果

表格隔行显示不同背景颜色，表格奇数行和偶数行交替显示不同的背景颜色。一、纯CSS3实现表格隔行变色关键CSS代码介绍 table tr:nth-child(odd){background:#F4F4F4;} table td:nth-child(even){color:#C00;} table tr:nth-child(5){background:#73…

江山如画
2018年9月5日
6.0K00
网页制作

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

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

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

第4课：字体

这一课，你将学习字体以及如何用CSS来设置字体。我们还会考虑如何解决“网站所选的字体仅当访问者的PC上安装有该字体时才会被显示”这一难题。本课将对下列CSS属性进行讲解： font-family font-style font-variant font-weight font-size font 字体族[font-family] CSS属性font-fami…

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

解决网页中img图片出现多余空白的方案

网页制作中，不管是table还是DIV+CSS排版时，会遇到浏览器中的图片元素img下出现多余空白的问题，非常常见，如何解决？ <table class=”w1024″ border=”0″ cellspacing=”0″ cellpadding=”0″> <tr> <td colspan=”3″> <img src…

江山如画
2020年4月16日
11.5K01

发表回复

登录后才能评论