JavaScript开启浏览器全屏模式

最新推荐文章于 2021-05-31 03:28:48 发布

weixin_30740295

最新推荐文章于 2021-05-31 03:28:48 发布

阅读量199

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/qmdx00/p/7446531.html

版权

-----------------------------------

今天给大家介绍js开启全屏

模式的方法（chrome下），

代码如下：

-----------------------------------

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>demo</title>
 6 </head>
 7 <body>
 8     <script type="text/javascript">
 9         window.onload = function(){
10 
11             (function fullScreen(element){
12                 if(element.requestFullscreen){
13                     element.requestFullscreen();
14                 }else if(element.webkitRequestFullscreen){
15                     element.webkitRequestFullscreen();
16                 }
17             })(document.documentElement);
18             
19         };
20     </script>
21 </body>
22 </html>

-----------------------------------

然而通过上面的代码，并

没有实现全屏的效果，打

开chrome的控制台，发

现弹出了一条警告信息：

原来，开启全屏模式只能由

用户手势触发，这是浏览器

采用的一种安全机制，将这

种强制全屏定义为恶意行为

，因此，我们可以给它添加

一个事件触发，改进后的代

码如下：

-----------------------------------

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>demo</title>
 6 </head>
 7 <body>
 8     <script type="text/javascript">
 9         window.onload = function(){
10 
11             function fullScreen(element){
12                 if(element.requestFullscreen){
13                     element.requestFullscreen();
14                 }else if(element.webkitRequestFullscreen){
15                     element.webkitRequestFullscreen();
16                 }
17             }
18             document.onkeydown = function(evt){
19                 if(evt.keyCode == 13){
20                     fullScreen(document.documentElement);
21                 }
22             };
23         };
24     </script>
25 </body>
26 </html>

-----------------------------------

这样，我们就可以通过回

车键进入全屏模式了；

-----------------------------------

感谢大家的阅读；

转载于:https://www.cnblogs.com/qmdx00/p/7446531.html

weixin_30740295

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript开启浏览器全屏模式

-----------------------------------今天给大家介绍js开启全屏模式的方法（chrome下），代码如下：----------------------------------- 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta...
复制链接

扫一扫