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

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

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

网页制作

CSS3 transition transform属性及实例详解-鼠标放到图片上图片等比例放大

CSS3的transform:scale()可以实现按比例放大或者缩小功能，transform呈现的是一种变形结果。 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡，transition呈现的是一种过渡，是一种动画转换过程，如渐显、渐弱、动画快慢等。 transiton:过渡属性过渡所需要时间过渡动画函数过渡延迟时间； t…

江山如画
2018年8月1日
9.6K00
网页制作

如何制作图片按钮，并为图片按钮添加提交表单和重置表单功能

网页中有表单，表单的默认按钮样式不是很好看，很多人为了美观使用图片做按钮。今天中国网页设计给大家分享在网页制作中怎么制作图片按钮，并为图片按钮添加提交表单和重置表单功能。一、图片按钮的制作方法 1、<input type=”image” /> 定义图像形式的提交按钮。 <input type=”image” sr…

江山如画
2018年9月30日
8.1K00
网页制作

FLV视频播放代码及Flvplayer.swf播放器下载

FLV是被众多新一代视频分享网站所采用，是目前增长最快、最为广泛的视频传播格式。 FLV 是FLASH VIDEO的简称，它形成的文件极小、加载速度极快，有效地解决了视频文件在网络上很好的使用等问题。下面分享在网页制作时，插入FLV格式视频的代码（兼容主流浏览器）： <object class id=”clsid:D27CDB6E-AE6D-11cf…

江山如画
2018年5月14日
8.0K01
网页制作

第8课：如何做各种超链接？

在这一课，你将学习如何在网页之间做超链接。如何做超链接？做链接只需一个元素<a>和一个属性href就行了。下面是一个例子，它是一个指向www.125jz.com的链接：例1： <a href=”http://www.125jz.com/”>指向www.125jz.com的链接</a> 该例在浏览器中将显示如下：指向…

江山如画
2018年1月20日
6.1K011
网页制作

jQuery屏蔽页面右键，禁止复制，文本选择代码

屏蔽页面右键，禁止复制，文本选择功能，用jQuery实现非常简单。 125建站网分享两种方法。方法一： //禁用右键、文本选择、复制 $(document).bind(“contextmenu”,function(){return false;}); $(document).bind(“selectstart”,function(){return fals…

江山如画
2019年10月16日
3.7K00
网页制作

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

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

孙萍
2020年4月4日
6.6K02

发表回复

登录后才能评论