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

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

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

网页制作

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

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

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

会移动的文字 marquee标签(入门到高级)

会移动的文字(Marquee) 基本语法 <marquee> … </marquee> <marquee> 啦啦啦，我会移动耶！ </marquee> 文字移动属性的设置方向 <direction=#> #=left, right <marquee direction=left&…

江山如画
2018年7月30日
7.0K02
网页制作

css布局基础：浮动和清除浮动练习1

主要知识点： 1、浮动：让元素脱离标准流，从而实现灵活的布局效果。 2、浮动只能左右，不能上下。float:left/right/none。 3、子元素浮动会造成父元素高度塌陷，清除浮动的3种方法：方法1：通过overflow属性方法2：通过clear属性方法3：通过伪元素选择器（推荐）效果图：参考： <!DOCTYPE html> &…

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

第7课：元素的分类与标识（class和id）

有时，你希望对特定元素或者特定一组元素应用特殊的样式。在这一课，我们将深入学习如何利用class和id来为所选元素指定属性。如何实现为网站上许多标题中的某一个单独应用颜色？如何实现把网站上的链接分为不同的类，并对各类链接分别应用不同的样式？这只是本课将解决的诸多问题中的最具代表性的两个问题。用class对元素进行分类比方说，我们有两个由链接组成的列表。…

江山如画
2020年2月25日
6.1K02
网页制作

第10课：外边距和内边距

上一课，你学习了盒状模型。在这一课，我们将了解如何通过设置margin（外边距）和padding（内边距）这两个CSS属性来改变元素的显示。为元素设置外边距为元素设置内边距为元素设置外边距一个元素有上（top）、下（bottom）、左（left）、右（right）四个边。外边距（margin）表示从一个元素的边到相邻元素(或者文档边界)之间的距离。可…

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

第12课：页面布局（CSS）

如何为页面实现理想的布局？你可以使用级联样式表（Cascading Style Sheets，简称CSS）为网站设计页面布局。本课将对CSS作简单介绍。如需从头开始全面学习CSS知识，可以使用我们提供的CSS教程。因此，请将本课当作CSS的预备课。CSS是HTML的搭档。在编码过程中，它们发挥不同的作用：HTML负责网页的具体内容（结构），而CSS则修饰网…

江山如画
2018年1月19日
9.5K01

发表回复

登录后才能评论