JS控制浏览器全屏

由于工作的需要,需要对页面进行投屏操作,这时为了达到更好的效果,浏览器全屏显示类似F12的效果。
HTML5提供了操作浏览器全屏的API,目前google chrome 15 +, safri5.1+,firfox10+,IE1能够很好的支持该属性;低版本的IE可以通过ActiveX插件实现;
google chrome 15 +, safri5.1+,firfox10+,IE1实现方式:
打开全屏:

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 exitFull() {
  // 判断各种浏览器,找到正确的方法
  var exitMethod = document.exitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.webkitExitFullscreen; 
  if (exitMethod) {
    exitMethod.call(document);
  }
  else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
    var wscript = new ActiveXObject("WScript.Shell");
    if (wscript !== null) {
      wscript.SendKeys("{F11}");
    }
  }
}

注意事项:
1,如果是低版本的在IE11以下,通过ActiveXObject ,首次加载页面的时候会出现是否加载AxtiveX控件的提示,这里会有一点不太友好,如果要避免这样的提示,只能去选项/设置面板中修改IE关于activex 控件的配置。没办法,这就是为什么这么多人讨厌IE的原因,但是IE还素有一个好处的,下面我们会讲到。
2,chrome等高版本浏览器可以通过调用Html5提供的API实现全屏和退出全屏,但是这个动作必须手动出发,例如通过点击事件:

$(document).onclick(function(){
    fullScreen();
})

这样是可以实现,但是如果我们需要在不手动触发的情况下通过js代码实现全屏API提供的方法就无法实现,如:

$(function(){
   fullScreen();
})
//或者
$("document").trigger('click');

上面这样浏览会报警告,提示:’Failed to execute ‘requestFullScreen’ on ‘Element’: API can only be initiated by a user gesture’,意思大概就是该方法只能通过手势出发。但是低版本的IE通过 wscript.SendKeys(“{F11}”)是可以实现的。
所以IE是又让人爱又让人恨,当然恨多一点。

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值