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

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

实现网页全屏和退出全屏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.2K00
网页制作

第14课：上传网页

只要你有服务器空间和一个FTP工具就可以在因特网上发布自己的网站了。

江山如画
2018年1月18日
7.0K12
网页制作

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

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

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

第1课：CSS是什么？

CSS是Cascading Style Sheets (CSS) 是一门指定文档该如何呈现给用户的语言。，用于为HTML文档定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。

江山如画
2020年2月22日
4.9K06
网页制作

怎么让一长串英文字符自动换行？

长串英文字符之间没有空格，整串都显示在一行，撑破了div，甚至跑到屏幕外了，如何解决？ <!doctype html> <html> <head> <meta charset=”utf-8″> <title>怎么让一长串英文字符自动换行？|www.125jz.com</title> &l…

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

Flex布局“弹性盒子”

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

江山如画
2020年4月12日
4.4K00

发表回复

登录后才能评论