HTML中的全屏设置

案例是通过一张图片展示，通过两个按钮来确定是否全屏显示，一个按钮来确定是否处于全屏状态，对主流浏览器都支持。

代码实例如下：

通过判断使用的浏览器进行选择选用什么浏览器：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div><img src="../image/1.jpg"/><input type="button" id="full" value="全屏"><input type="button" id="cancelFull" value="退出全屏"><input type="button" id="isFull" value="是否全屏"></div>
<script>window.onload = function () {var div = document.querySelector("div");document.querySelector("#full").onclick = function () {//使用Chrome浏览器需要加上webkit// div.webkitRequestFullScreen();// div.requestFullscreen();//使用FireFox浏览器需要加上moz// div.mozRequestFullScreen();//    所有浏览器都可以全屏，使用能力测试if (div.requestFullscreen) {div.requestFullscreen();} else if (div.webkitRequestFullScreen) {div.webkitRequestFullScreen();} else if (div.mozRequestFullScreen) {div.mozRequestFullScreen();} else if (div.msRequestFullScreen) {div.msRequestFullScreen();}}//    退出全屏,只能使用document实现document.querySelector("#cancelFull").onclick = function () {if (document.cancelFullscreen) {document.cancelFullscreen();} else if (document.webkitCancelFullScreen) {document.webkitCancelFullScreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.msCancelFullScreen) {document.msCancelFullScreen();}}//是否是全屏状态 也是使用documentdocument.querySelector("#isFull").onclick = function () {if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {alert(true);} else {alert(false);}}}
</script>
</body>
</html>

转载于:https://www.cnblogs.com/ys15/p/10707333.html

HTML中的全屏设置相关推荐

wordpress 背景_如何在WordPress中添加全屏背景图片
wordpress 背景 Full screen background image seems to be a new design trend that is becoming fashionabl ...
Android 无标题全屏设置
Android 无标题全屏设置标题栏和状态栏 Android程序默认情况下是包含状态栏和标题栏的. 在Eclipse中新建一个Android程序,运行后显示如下: 图中标出了状态栏(显示时间.电池 ...
Android端App开发之刘海屏手机全屏设置实践
笔者最近开发一款视频同步演示产品,主要功能是:多台手机设备在手机专卖店展台区同步播放宣传视频,即在任何时间打开任一台设备都要同步播放视频,达到宣传产品和整体化一的用户体验,原理即在服务器打开网页播放展 ...
Android : Dialog中VideoView全屏播放
Android : Dialog中VideoView全屏播放前几天公司要求在引导页播放视频,如果跳转到activity去进行播放,再返回时生命周期方法调动会不太好,最后改成了在引导页构建一个Dial ...
android.xml设置全屏,Android全屏设置的方法总结
Android 有两种方式可以设置全屏. 第一种方式:在protected void onCreate(Bundle savedInstanceState) 里面的this.setContentVie ...
video标签或微软云 azure-media-player 禁止在iphone safari中默认全屏播放
video标签或微软云 azure-media-player 禁止在iphone safari中默认全屏播放关键代码 webkit-playsinline='true' playsinline= ...
cf全屏设置win7推荐方法
很多cf玩家在win7系统上玩cf时并不是全屏游戏的,表示玩的很不爽啊,想要在win7系统把cf设置成全屏要怎么操作呢?win7设置cf游戏全屏的方法其实还是挺简单的,小编偶尔也玩了cf,这就给各位友 ...
在VirtualBox中为全屏显示安装增强功能时出现Please install the gcc make perl packages from your distribution
在virtualbox中为全屏显示安装增强功能时出现Please install the gcc make perl packages from your distribution时,以下步骤解决: ...

HTML中的全屏设置

HTML中的全屏设置相关推荐

最新文章

热门文章