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

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

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

网页制作

5种 CSS 实现DIV中内容垂直居中的方法

使用 CSS 实现DIV中内容垂直居中并不容易，有些方法在一些浏览器中无效。今天中国网页设计给大家分享使DIV中对象垂直集中的5种不同方法，以及它们各自的优缺点。 CSS 实现DIV中内容垂直居中方法一这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。 <div class=…

江山如画
2018年9月23日
13.2K00
网页制作

第10课：外边距和内边距

上一课，你学习了盒状模型。在这一课，我们将了解如何通过设置margin（外边距）和padding（内边距）这两个CSS属性来改变元素的显示。为元素设置外边距为元素设置内边距为元素设置外边距一个元素有上（top）、下（bottom）、左（left）、右（right）四个边。外边距（margin）表示从一个元素的边到相邻元素(或者文档边界)之间的距离。可…

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

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

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

江山如画
2020年4月16日
10.5K01
网页制作

怎么让一长串英文字符自动换行？

长串英文字符之间没有空格，整串都显示在一行，撑破了div，甚至跑到屏幕外了，如何解决？ <!doctype html> <html> <head> <meta charset=”utf-8″> <title>怎么让一长串英文字符自动换行？|www.125jz.com</title> &l…

江山如画
2019年11月20日
6.3K00
网页制作

跟永哥学HTML5（6）H5语义化标记使用示例

介绍了HTML5中新增的语义化标记article section aside hgroup header footer nav time mark figure figcaption，对各个标记给出解释和应用示例。

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

css布局基础：定位练习1

主要知识点： 1、5种常用定位：静态定位/相对定位/绝对定位/固定定位/吸附定位（磁铁定位） position:static/relative/absolute/fixed/sticky。 2、除静态定位外，都可以用left/top/bottom/right/z-index属性进行移动。效果图：效果说明：故宫文字段落设置背景色黑色透明，覆盖在图片底部。 …

孙萍
2020年4月4日
8.0K00

发表回复

登录后才能评论