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

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

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

网页制作

label文字与textarea、input垂直居中、顶部对齐的方法

在网站表单制作时label标签里的文字与Iput、textarea标签的默认对齐方式不美观，如下图。姓名：留言：中国网页设计给大家分享label文字与input、textarea垂直居中对齐和顶部对齐的简单方法。 label文字与textarea、input垂直居中的方法在input标签样式中加入css标签vertical-align: middle…

江山如画
2018年3月18日
11.6K01
网页制作

巧用边框线实现立体按钮效果（纯CSS）

本文教你使用CSS制作立体按钮，代码简单。

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

Div+CSS左侧尺寸固定右侧自适应布局的5种实现方法

css多栏自适应布局一般使用position属性布局，或者用float属性布局，也可以使用display属性。 position适合首页布局，因为首页内容往往可以完全控制。float适合模板布局，模板中填充的内容无法控制。相关阅读：左侧固定，右侧自适应布局的两种实现方法 1、浮动实现原理：左侧定宽浮动，右侧使用margin-left，且不要定宽，容器尺寸…

江山如画
2021年11月29日
10.5K00
网页制作

第3课：HTML的元素与标签

本节课我们学习HTML的重要成分——元素（element）。元素用于结构化HTML文档，并告知浏览器如何呈现网页。一般来说，元素由首标签（start tag）、内容（content）和尾标签（end tag）构成。 “标签”是什么？标签（tag）指示元素的起始与结束，所有标签都由“<”及“＞”所围住，如<html>。一般标签成对出现，首标…

江山如画
2018年1月20日
9.9K018
网页制作

两个iframe自适应高度的解决方法

很多小伙伴在做网站的时候对于解决iframe的高度问题都是很头大的一件事，今天吾爱编程为大家介绍一下iframe自适应高度的方法，有需要的小伙伴可以参考一下： 1、需求分析：使页面中的iframe可以自适应高度，避免页面高度增加的时候页面和iframe会同时出现滚动条。 2、方法一：在iframe上面直接加onload的方法，使其自适应 <ifra…

江山如画
2021年3月16日
4.3K00
网页制作

跟永哥学HTML5（3）：HTML5新增语义化元素的使用

上节课我们讲了html5与html4的区别，Html5对语法进行了简化，一个htm5文档结构代码如下： <!doctype html> <html> <head> <meta charset=”utf-8″> <title>无标题文档</title> </head> <…

江山如画
2018年1月26日
16.2K10

发表回复

登录后才能评论