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

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

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

网页制作

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

问题： ajax读取留言列表，每条留言后面有个回复按钮，class为“reply”,用$(“.reply”).click(function(){ //do something… })，后面通过ajax加载进来的列表中的回复按钮，点击事件会失效。解决方法：最简单的方法就是直接在标签中写onclick=”&#8…

江山如画
2019年2月16日
19.8K00
网页制作

第5课：到目前为止学到了些什么？

上一课我们已经学习了这些： <html> <head><title></title></head> <body> </body> </html> 网页标题（title）写在head（头部）里：<title>网页标题写在这里</title>。…

江山如画
2018年1月20日
9.5K03
网页制作

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

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

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

第5课：文本

文本的显示格式与式样对于网页设计师来说是一个重要问题。这一课将向你介绍CSS在文本布局方面令人激动的特性。本课将对下列CSS属性进行讲解： text-indent text-align text-decoration letter-spacing text-transform 文本缩进[text-indent] CSS属性text-indent用于为段落设置…

江山如画
2020年2月22日
11.9K04
网页制作

跟永哥学HTML5（6）：H5表单及表单验证

表单在网页中主要负责数据采集功能。HTML 5一个令人兴奋的发展领域是新的Web表单。
在今天的课程中你会看到浏览器会验证所需的字段,数据类型,如电子邮件、网址和任何模式，而不使用任何JavaScript。

江山如画
2018年2月27日
11.5K03
图片的title和alt属性区别

图片的title和alt属性是初学者容易混淆的。125网页设计给大家介绍下title和alt属性的用法及区别

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

发表回复

登录后才能评论