JS实现浏览器全屏和退出全屏-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

JS实现浏览器全屏和退出全屏

简介:

   测试环境:

    【操作系统】: win7 64位

    【IE】:IE9

225810_hDpk_1434710.jpg

    【FireFox】: FireFox 29

230158_UYKR_1434710.jpg

    【Chrome】: Chrome 34

230215_y2zL_1434710.jpg

    众所周知,IE是个奇葩的浏览器,但是由于用户量很大,开发者还是不得不为IE考虑一下,于是,各种浏览器相关的操作,都要多一个特别的判断——专门针对IE浏览器的判断,这里的全屏也不例外。看代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function fullScreen() {
  var el = document.documentElement;
  var rfs = el.requestFullScreen || el.webkitRequestFullScreen || 
      el.mozRequestFullScreen || el.msRequestFullScreen;
  if(typeof rfs != "undefined" && rfs) {
    rfs.call(el);
  else if(typeof window.ActiveXObject != "undefined") {
    //for IE,这里其实就是模拟了按下键盘的F11,使浏览器全屏
    var wscript = new ActiveXObject("WScript.Shell");
    if(wscript != null) {
        wscript.SendKeys("{F11}");
    }
  }
}
function exitFullScreen() {
  var el = document;
  var cfs = el.cancelFullScreen || el.webkitCancelFullScreen || 
      el.mozCancelFullScreen || el.exitFullScreen;
  if(typeof cfs != "undefined" && cfs) {
    cfs.call(el);
  else if(typeof window.ActiveXObject != "undefined") {
    //for IE,这里和fullScreen相同,模拟按下F11键退出全屏
    var wscript = new ActiveXObject("WScript.Shell");
    if(wscript != null) {
        wscript.SendKeys("{F11}");
    }
  }
}

    下面是个简单的例子(假设上面的代码保存在script.js文件中):在两个按钮中调用这两个函数即可实现:

1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div style="margin-top:50px"<!-- 设置margin-top是为了查看IE全屏前后的区别 -->
  <input type="button" value="FullScreen" onclick="fullScreen()" />
  <input type="button" value="ExitFullScreen" onclick="exitFullScreen()" />
</div>
</body>
</html>

    话不多说,先看火狐:全屏前

212103_KXPC_1434710.jpg

    

    全屏后(会出现相应的提示信息):

212236_UvaR_1434710.jpg

    

    再看看谷歌:全屏前:

212352_YahP_1434710.jpg

    

    全屏后(也有相应的提示):

212435_RID0_1434710.jpg

    

    最后看看奇葩的IE:全屏前:

212540_jsNg_1434710.jpg


    点击【FullScreen】后,浏览器下方会出现下面的提示:

212624_9Iry_1434710.jpg


    点击【允许阻止的内容】,再点击【FullScreen】会出现下面的警告:

213800_T0en_1434710.jpg


    点击【是】,此时浏览器会全屏,如下图:

212751_R8L3_1434710.jpg

    上图中,IE已经全屏,还显示地址栏,是因为我把光标放在了屏幕的顶端,导致地址栏下滑,于是按钮上方50px的间隔也被遮住了。这也是为什么在代码中设置margin-top:50px的原因。把光标移开,浏览器地址栏自动上滑消失。如下图:

213916_TSlm_1434710.jpg


    到此,几种主流的浏览器全屏已经测试完毕。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章