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

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

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

网页制作

css布局基础：定位练习1

主要知识点： 1、5种常用定位：静态定位/相对定位/绝对定位/固定定位/吸附定位（磁铁定位） position:static/relative/absolute/fixed/sticky。 2、除静态定位外，都可以用left/top/bottom/right/z-index属性进行移动。效果图：效果说明：故宫文字段落设置背景色黑色透明，覆盖在图片底部。 …

孙萍
2020年4月4日
6.9K00
网页制作

CSS 实现水平、垂直居中布局代码大全

CSS实现水平居中若是行内元素，则直接给其父元素设置text-align: center即可若是块级元素，则直接给该元素设置margin: 0 auto即可若子元素包含浮动元素，则给父元素设置width:fit-content并且配合margin .parent { width: -webkit-fit-content; width: -moz-fit…

江山如画
2019年11月26日
12.7K00
网页制作

jquery实现全选、反选、取消全选功能代码

管理系统后台，商品管理、信息管理等，需要删除，为方便操作应该提供全选、反选、取消全选功能。今天中文网页设计分享jquery实现全选、反选、取消全选功能代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; chars…

江山如画
2018年10月17日
9.1K03
网页制作

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

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

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

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

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

江山如画
2023年3月9日
2.7K00
网页制作

HTML5网页中如何嵌入音频，视频？

《HTML5的视频播放控制技术》介绍了HTML5的video元素和常用属性，以及视频播放控制技术，如播放、暂停、音量、全屏、回放功能的实现。不会的童鞋可以学习。本文主要介绍在HTML5 中如何嵌入音频，视频？在HTML5 中如何嵌入音频？ HTML5 支持 MP3、Wav 和 Ogg 格式的音频，代码示例： <audio controls>…

江山如画
2019年11月23日
4.8K00

发表回复

登录后才能评论