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

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

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

项目开发：同一个页面，需要在浏览器中浏览是一种样式，而当要打印这个页面时候，又需要呈现另一种样式。此时可以用link标签中的media属性解决此问题。如下面这两个引用： <link href=”stylesheets/print.css” media=”print” rel=”stylesheet” type=”text/css” /> &l…

江山如画
2019年11月20日
11.8K00
网页制作

vue学习-我的第一个vue代码

创建一个 .html 文件，然后通过如下方式引入 Vue： <!– 开发环境版本，包含了有帮助的命令行警告 –> <script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script> 或者： <!– 生产环境版本，优化了尺寸和速度 –>…

江山如画
2020年6月14日
15.4K00
网页制作

如何在网页中输入多个连续的空格？

默认状态下（输入法为半角状态），按空格键只能输入一个空格，要在文本之间插入多个连续的空格，可以使用以下几种方法： 1) 使用Ctrl+Shift+Space组合键。 2) 在中文全角状态下，使用空格键。 3) 选择【插入】→【HTML】→【特殊字符】命令下的“不换行空格”命令。 4) 直接在代码视图输入“ ”字符。

江山如画
2020年4月3日
24.0K03
网页制作

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

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

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

CSS进阶，4个案例入门，学会LESS使用

Less 简介什么是LESSCSS LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。 LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。 Less语言特性 LESS的变量变量允许我们单独定义一系列通用的样式…

江山如画
2019年7月17日
3.9K00
网页制作

css布局基础：行内元素、块级元素练习

主要知识点： 1、理解什么是行内元素？什么是块级元素？ 2、知道块级元素能够设置宽高，行内元素不可设置宽高（替换元素可以）。 3、掌握display属性的使用。 4、掌握css伪类选择器的使用。扩展： 1、nth-child()选择器选择其父元素的第n个子元素。效果图：参考： <nav> <ul> <li><…

孙萍
2020年4月4日
11.4K01

发表回复

登录后才能评论