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

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

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

网页制作

Less编写及使用快速入门

前面我们学习了《4个案例入门，学会LESS使用》，今天一起来学习如何编写，编译并使用LESS LESS的编写 LESS的使用是很容易的，使用你最常使用的代码编辑器，按LESSCSS的语法规则写好.less文件，接下来，使用编译工具它编译成.css，最后再引入页面即可。 LESS的编译 GUI编译工具为方便起见，建议初学者使用GUI编译工具来编译.less文…

江山如画
2019年7月17日
9.1K01
网页制作

CSS制作上一页下一页页码显示样式

今天教大家制作页面的上一页下一页页码显示样式，效果如图所示。 <!doctype html> <html> <head> <meta charset=”utf-8″> <title>CSS制作上一页下一页页码显示样式|www.125jz.com</title> <style…

江山如画
2018年7月29日
6.8K01
网页制作

jQuery获取URL传递的参数

URL传递参数是程序开发中经常用到的，中国网页设计给大家分享使用jQuery如何获取URL传递的参数。例如要获取下面URL地址中的参数: http://www.125jz.com?id=”2020″&title=”jQuery获取URL传递的参数” 实现代码如下： //获取URL参数a和b funct…

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

第10课：表格

表格用来显示那些逻辑上以行和列显示的信息。表格难学吗？对于初学者来说，在HTML中创建表格似乎比较复杂，不过只要耐心细致地观察，你就会发现表格实际上与其它HTML元素相似，也具有严格的逻辑结构。例1： <table> <tr><td>单元格1</td><td>单元格2</td>&l…

江山如画
2018年1月19日
7.0K05
网页制作

div/span水平顶部对齐,同一行div跟内容最多的div高度保持一样高

一、两个div水平顶部对齐两个div都设置display:inline-block; 并且右边的div增加样式vertical-align: top; 使得右边的div跟左边的div的顶部对齐。 <div id=’left’ style=”width:20%; display:inline-block”> </div> <d…

江山如画
2018年12月10日
9.8K00
网页制作

3种纯CSS/jquery实现的表格隔行变色，鼠标悬停：hover变色效果

表格隔行显示不同背景颜色，表格奇数行和偶数行交替显示不同的背景颜色。一、纯CSS3实现表格隔行变色关键CSS代码介绍 table tr:nth-child(odd){background:#F4F4F4;} table td:nth-child(even){color:#C00;} table tr:nth-child(5){background:#73…

江山如画
2018年9月5日
6.0K00

发表回复

登录后才能评论