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

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

实现网页全屏和退出全屏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的浮动及清除浮动的5种方法

css属性float：left/right/none 左浮动/右浮动/不浮动（默认），文章介绍了清除浮动的5种方法，并指出其实现原理、优缺点和使用建议。

江山如画
2019年11月5日
5.9K00
网页制作

太赞了！推荐2个多彩渐变配色网站

1、根据心情和情绪生成的渐变色 https://gradienmood.posandu.me/ 色彩是拥有情绪的，但是有情绪的色彩有不一定仅仅只有一种颜色。这个名为 Gradien Mood 的渐变色网站会将不同感觉和渐变色搜集起来，其中有的渐变色甚至拥有极为复杂的情绪，而你需要做的，就是输入你想传递的情绪，然后就能搜到相关的情绪和色彩，包括渐变的 CSS …

江山如画
2023年1月18日
5.6K00
网页制作

第15课：最后提示

祝贺！你已经进入最后一课了！我已经学到全部知识了？如果你已经学完以上教程，恭喜你，你已经学到了很多关于HTML的知识，并且完全有能力创建自己的网站！不过，你所学到的只是基础知识，还有许多内容需要掌握。但是你已经为进一步学习打下了坚实的基础。在最后这一课中，我们将给予一些最后提示：首先，在HTML文档中，应保持正确的顺序与结构。令你的HTML文档具有良…

江山如画
2018年1月18日
6.0K01
网页制作

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日
5.5K00
网页制作

Flex布局“弹性盒子”

一．概念 flex布局： Flex Box 的缩写，意味“灵活的盒子”或“弹性盒子”，所以flex布局又称“弹性布局”。 flex容器采用flex布局的元素，成为flex容器。display:flex; flex项目 flex容器的所有子元素自动成为容器成员，称为flex项目。 <div style=“ display:flex;”> &l…

江山如画
2020年4月12日
4.7K00
网页制作

手把手，永哥教你学会css sprite（雪碧图）技术

css sprite又称雪碧图或css精灵。雪碧图就是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上，使用雪碧图只需要引用一张图片，对内存和带宽更加友好。 css sprite优点：有效减少网站的http请求数量，加…

江山如画
2018年2月20日
11.6K00

发表回复

登录后才能评论