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

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

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

网页制作

JavaScript 向数组的开头或末尾添加元素：unshift() 、push()方法详解

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。 push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。 unshift() 实例： <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>uns…

江山如画
2018年9月5日
15.6K01
网页制作

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

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

江山如画
2019年4月2日
15.1K01
网页制作

iframe中子页和父页面如何传值

本文介绍了，父页面father.html和子页面son.html之间如何传值，子页面如何调用父页面中的函数等操作

江山如画
2021年11月30日
5.5K00
网页制作

第1课：CSS是什么？

CSS是Cascading Style Sheets (CSS) 是一门指定文档该如何呈现给用户的语言。，用于为HTML文档定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。

江山如画
2020年2月22日
6.1K06
网页制作

第9课：在网页中添加图像

假如能把自己喜欢的的图像放到网页上，那就太好了。这貌似有点难度。。。也许是有点难度，但其实也不难，一个元素就可以搞定：例1： <img src=”http://www.125jz.com/wp-content/uploads/2018/01/liudehua.jpg” /> 该例在浏览器中将显示如下：你要做的只是：告诉浏览器你要插入一张图…

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

如何给网页中的表格table添加滚动条

最近在写一个项目的时候输出的结果有点多table的宽度直接把页面撑变形了，就想到了给table加滚动条，接下来125建站网为大家介绍HTML给table添加滚动条的方法，有需要的小伙伴可以参考一下： 1、方法分析：要给table添加滚动条其实很简单，我们首先把table放到一个div里面，然后再设置div显示滚动条即可。 2、html代码： <div…

江山如画
2023年3月9日
3.1K00

发表回复

登录后才能评论