`

js实现浏览器全屏

    博客分类：
  • js
jsfullScreen 
阅读更多

 众所周知，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>
分享到：
| 大数据【big data 4v】
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics