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

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

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

网页制作

最简单的wmv视频网页播放代码

如何在网页上播放wmv格式视频？ 1、将以下代码复制到html网页的<body>中：如 <embed src=”wangyesheji1.wmv” width=”460″ height=”414″ autostart=”1″ filename=”mms:/wangyesheji1.wmv” showcontrols=”1″ showstat…

江山如画
2021年4月5日
12.8K02
网页制作

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

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

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

第12课：页面布局（CSS）

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

江山如画
2018年1月19日
9.0K01
网页制作

HTML5网页中如何嵌入音频，视频？

《HTML5的视频播放控制技术》介绍了HTML5的video元素和常用属性，以及视频播放控制技术，如播放、暂停、音量、全屏、回放功能的实现。不会的童鞋可以学习。本文主要介绍在HTML5 中如何嵌入音频，视频？在HTML5 中如何嵌入音频？ HTML5 支持 MP3、Wav 和 Ogg 格式的音频，代码示例： <audio controls>…

江山如画
2019年11月23日
4.9K00
网页制作

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.3K00
网页制作

CSS常用类/ID命名规范

书写规范请查看《CSS语法及命名规范（入门）》，本文介绍常用类/ID命名规范，CSS文件命名规范，如页面主体：main 内容:content 标签页：tab 章列表：list 信息：msg 标题：title 热点：hot 新闻：news注册：regsiter 合作伙伴：partner 友情链接：friendlink 页脚：footer 版权：cop…

江山如画
2019年3月14日
8.2K02

发表回复

登录后才能评论