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

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

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

网页制作

div/span水平顶部对齐,同一行div跟内容最多的div高度保持一样高

一、两个div水平顶部对齐两个div都设置display:inline-block; 并且右边的div增加样式vertical-align: top; 使得右边的div跟左边的div的顶部对齐。 <div id=’left’ style=”width:20%; display:inline-block”> </div> <d…

江山如画
2018年12月10日
9.5K00
网页制作

css布局基础：定位综合练习

主要知识点： 1、5种常用定位：静态定位/相对定位/绝对定位/固定定位/吸附定位（磁铁定位） position:static/relative/absolute/fixed/sticky。 2、除静态定位外，都可以用left/top/bottom/right/z-index属性进行移动。整体效果图：效果说明： 1、随着网页向下滚动，当导航到达窗口顶端（t…

孙萍
2020年4月4日
8.4K02
CSS border-radius 深入学习（含可视化生成工具）

没有学过CSS border-radius 的同学，请阅读《css实现圆角矩形、半圆、圆形效果—border-radius使用详解》一文。border-radius 写法： .box{ border-radius: 30%; /* 也可以用PX代替 */ } 矩形的四角会变为相应数值的圆角，如下图：只输入一个数值，所有角都会被四舍五入，若要固定值可以使用 …

江山如画
2019年10月17日 • 网页制作
11.5K00
网页制作

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

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

江山如画
2018年2月27日
9.2K03
网页制作

3个超酷的CSS3图片动画特效：图片变圆角，放大，旋转

本实例制作需要学习《CSS3 transition transform属性及实例详解》，学完后可先练习CSS3 transform:rotate()制作旋转图片 See the Pen 三个CSS3图片动画特效 by 江山如画 (@jgyzhr)on CodePen.

江山如画
2020年1月1日
9.3K01
网页制作

响应式布局和自适应的区别

客户端，PC、平板、手机，各种尺寸，要给电脑PC和手机分别设计不同的网页吗？要给每一个手机分别设计一个网页吗？不需要，因为有了响应式布局。响应式布局被大家熟知的一个重要原因就是Twitter开源了bootstrap。。响应式布局和自适应的区别：自适应是为了解决如何才能在不同大小的设备上呈现相同的网页。手机的屏幕比较小，宽度通常在600像素以下，pc…

江山如画
2019年10月15日
5.2K02

发表回复

登录后才能评论