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

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

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

网页制作

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日
8.6K01
网页制作

第7课：HTML标签的属性

许多元素都可以设置属性。属性是什么？ HTML通过标签告诉浏览器如何展示网页（比如告诉浏览器显示一个换行）。你可以为某些元素附加一些信息，这些附加信息被称为属性（attribute）。例1： <h2 style=”background-color: #ff0000;”>上125jz.com学网页制作</h2> 属性应写在元素的首标签…

江山如画
2018年1月20日
3.9K02
CSS Sprites:图片整合技术详细案例

CSS Sprites 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。介绍了CSS Sprites技术的实现方法，优点和缺点。最后通过实例CSS Sprites技术制作导航栏演示CSS Sprites的使用。手把手，永哥教你学会css sprite（雪碧图）技术 CSS Sprites的原理：将小图片整合到一张大的图片上，根据具体图…

江山如画
2019年11月5日 • 网页制作
11.8K00
页面编码为UTF-8的项目中servlet中文显示乱码的解决方法

servlet中文显示乱码：
1、servlet中输出中文字符
2、servlet接收表单传值并显示，表单字段含中文。

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

css布局基础：浮动和清除浮动练习2

主要知识点： 1、浮动：让元素脱离标准流，从而实现灵活的布局效果。 2、浮动只能左右，不能上下。float:left/right/none。 3、子元素浮动会造成父元素高度塌陷，清除浮动的3种方法：方法1：通过overflow属性方法2：通过clear属性方法3：通过伪元素选择器（推荐）效果图：参考： <header> <img …

孙萍
2020年4月4日
5.1K00
网页制作

第11课：表格的高级特性

表格还有哪些相关属性？ colspan和rowspan这两个属性用于创建特殊的表格。colspan是“column span（跨列）”的缩写。colspan属性用在<td>标签中，用来指定单元格横向跨越的列数：例1： <table border=”1″> <tr><td colspan=”3″>单元格1&lt…

江山如画
2018年1月19日
8.4K02

发表回复

登录后才能评论