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

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

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

网页制作

给网页中的按钮和图片添加声音

Loud links-是一款大小只有1.5KB的WEB音效插件，可以实现网页中按钮与图片等元素的触发交互，比如鼠标放上去后出现响声，或者鼠标点击后出现响声。Loud links使用相当简单。使用方法 1. 在网页中引入JS 文件 <script src=”js/loudlinks.min.js”></script> 2. 在需要触发…

江山如画
2018年2月6日
12.4K00
网页制作

纯JS实现的验证码-可自定义长度和字符

纯JS实现的页面验证码-可自定义长度和验证码字符生成验证码的函数 <script type=”text/javascript”> var code; function createCode() { code = “”; var codeLength = 4; //验证码的长度 var checkCode = document.getElemen…

江山如画
2018年10月9日
4.8K00
网页制作

Marquee标签实现跑马灯、滚动公告、通知效果

1.Marquee基本语法 <marquee> … </marquee> 实例演示：会移动的文字(Marquee) <marquee>啦啦啦，我会移动耶！</marquee> 2.文字移动属性（1）方向：direction=# #=left, right,up,down 例： <marqu…

江山如画
2019年2月26日
11.8K04
网页制作

CSS3 transform:rotate()制作旋转图片

在《CSS3 transition transform属性及实例详解》中我们实现了：鼠标放到图片上，图片等比例放大的效果，今天分享transform:rotate()制作旋转图片。 CSS3中的transform:rotate()可以实现旋转功能，可以在CSS里面设定旋转的角度，也可以设定旋转用多少时间来完成。旋转图片HTML代码 <img src=…

江山如画
2019年1月29日
19.1K12
网页制作

jQuery屏蔽页面右键，禁止复制，文本选择代码

屏蔽页面右键，禁止复制，文本选择功能，用jQuery实现非常简单。 125建站网分享两种方法。方法一： //禁用右键、文本选择、复制 $(document).bind(“contextmenu”,function(){return false;}); $(document).bind(“selectstart”,function(){return fals…

江山如画
2019年10月16日
4.1K00
网页制作

美观简洁的bootstrap 表单验证代码

美观简洁的bootstrap 表单验证代码，如上图所示，点击登录按钮，在输入框下方显示错误提示信息 <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title>ipput</title> <!– 新 Bootstra…

江山如画
2020年2月9日
8.9K00

发表回复

登录后才能评论