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

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

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

网页制作

jQuery获取URL传递的参数

URL传递参数是程序开发中经常用到的，中国网页设计给大家分享使用jQuery如何获取URL传递的参数。例如要获取下面URL地址中的参数: http://www.125jz.com?id=”2020″&title=”jQuery获取URL传递的参数” 实现代码如下： //获取URL参数a和b funct…

江山如画
2018年9月30日
3.5K00
网页制作

HTML5的视频播放控制技术

介绍了HTML5的video元素和常用属性，以及视频播放控制技术，如播放、暂停、音量、全屏、回放功能的实现。

江山如画
2019年10月15日
8.9K01
网页制作

Div+CSS左侧尺寸固定右侧自适应布局的5种实现方法

css多栏自适应布局一般使用position属性布局，或者用float属性布局，也可以使用display属性。 position适合首页布局，因为首页内容往往可以完全控制。float适合模板布局，模板中填充的内容无法控制。相关阅读：左侧固定，右侧自适应布局的两种实现方法 1、浮动实现原理：左侧定宽浮动，右侧使用margin-left，且不要定宽，容器尺寸…

江山如画
2021年11月29日
8.4K00
网页制作

纯CSS制作热门文章排行，且前3名背景不同

要制作文章排行前10、或评论排行榜1、2、3、4…，还要给前三名加上不同的背景，可以用纯css实现（用Ol，li），但通常网页制作中使用ul的比较多，因为不同浏览器对ol li有序列表默认自带的序号列表有着不同显示，容易引起浏览器兼容问题，所以遇到这样的有序排版布局，最简单是将序号切成背景图片! 使用ul li实现文章排行有序排版布局。 htm…

江山如画
2018年7月14日
3.9K00
网页制作

第10课：外边距和内边距

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

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

CSS实现段落首字下沉效果的2种方法

CSS实现段落首字下沉效果方法一在CSS布局中，通过设置首字的大小并向左浮动，从而使得首字与其他字符区别；通过右边距控制首字与其他字符的距离。 #first{font-size:3em; font-weight:bold; float:left; margin-right:20px; } <p><span id=”first”>云&…

江山如画
2019年4月2日
14.1K01

发表回复

登录后才能评论