Fullscreen API全屏显示

最新推荐文章于 2019-09-05 17:29:01 发布

kongjunchao159

最新推荐文章于 2019-09-05 17:29:01 发布

阅读量390

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5

本文链接：https://blog.youkuaiyun.com/kongjunchao159/article/details/47317849

HTML5 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一个简单的HTML页面如何通过JavaScript实现全屏显示及退出全屏的功能。利用DOM元素的不同方法来兼容多种浏览器环境，如Firefox、Chrome等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/reset.css" />
</head>
<title></title>
<body>
<h2 onclick="launchFullScreen(document.documentElement);">全屏显示</h2>
<h2 onclick="exitFullscreen();">退出全屏</h2>
<script>
//全屏显示
function launchFullScreen(element){
   if(element.requestFullScreen){
       element.requestFullScreen();
   }else if(element.mozRequestFullScreen){
       element.mozRequestFullScreen();
   }else if(element.webkitRequestFullScreen){
       element.webkitRequestFullScreen();
   }
}
//退出全屏
function exitFullscreen(){
   if(document.exitFullscreen){
       document.exitFullscreen();
   }else if(document.mozCancelFullScreen){
       document.mozCancelFullScreen();
   }else if(document.webkitExitFullscreen){
       document.webkitExitFullscreen();
   }
}
</script>
</body>
</html>