js达成各浏览器全屏代码实例【韦德娱乐1946网页

2019-07-28 11:25 来源:未知

项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果。 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有google chrome 15 , safri5.1 ,firfox10 ,IE11支持

HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做全屏API,游戏呀,等都很有用。先看常见的API

现代浏览器包括ie11,可以直接用h5的全屏api实现
低版本的IE需要通过ActiveX插件实现;

全屏

 element.requestFullScreen()

韦德娱乐1946网页版,//直接上代码

var docElm = document.documentElement;

//W3C 

if (docElm.requestFullscreen) { 

  docElm.requestFullscreen(); 

}

//FireFox 

else if (docElm.mozRequestFullScreen) { 

  docElm.mozRequestFullScreen(); 

}

//Chrome等 

else if (docElm.webkitRequestFullScreen) { 

  docElm.webkitRequestFullScreen(); 

}

//IE11

else if (elem.msRequestFullscreen) {

 elem.msRequestFullscreen();

}

 作用:请求某个元素element全屏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <button onclick="fullScreen()">现代浏览器全屏</button>

    <button onclick="exitScreen()">现代浏览器退出</button>

    <button onclick="iefull()">低版本ie全屏</button>
  </body>
  <script src="js/jquery-2.1.1.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    //全屏
    function fullScreen(){
      var el = document.documentElement;
      var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;   
        if(typeof rfs != "undefined" && rfs) {
          rfs.call(el);
        };
       return;
    }
    //退出全屏
    function exitScreen(){
      if (document.exitFullscreen) { 
        document.exitFullscreen(); 
      } 
      else if (document.mozCancelFullScreen) { 
        document.mozCancelFullScreen(); 
      } 
      else if (document.webkitCancelFullScreen) { 
        document.webkitCancelFullScreen(); 
      } 
      else if (document.msExitFullscreen) { 
        document.msExitFullscreen(); 
      } 
      if(typeof cfs != "undefined" && cfs) {
        cfs.call(el);
      }
    }
    //ie低版本的全屏,退出全屏都这个方法
    function iefull(){
      var el = document.documentElement;
      var rfs = el.msRequestFullScreen;
      if(typeof window.ActiveXObject != "undefined") {
        //这的方法 模拟f11键,使浏览器全屏
        var wscript = new ActiveXObject("WScript.Shell");
        if(wscript != null) {
          wscript.SendKeys("{F11}");
        }
      }
    }
    //注:ie调用ActiveX控件,需要在ie浏览器安全设置里面把 ‘未标记为可安全执行脚本的ActiveX控件初始化并执行脚本' 设置为启用
  </script>
</html>

退出全屏 

Document.getElementById(“myCanvas”).requestFullScreen()

注:实际应用中,可通过区分ie11 ie10,其它浏览器,控制按钮的显示、隐藏来实现 适用各浏览器的全屏功能;

 if (document.exitFullscreen) { 
document.exitFullscreen(); 
} 
else if (document.mozCancelFullScreen) { 
document.mozCancelFullScreen(); 
} 
else if (document.webkitCancelFullScreen) { 
document.webkitCancelFullScreen(); 
} 
else if (document.msExitFullscreen) { 
document.msExitFullscreen(); 
} 

  这里是将其中的元素ID去请求fullscreen

您可能感兴趣的文章:

  • 用html5 js实现点击一个按钮达到浏览器全屏效果
  • JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
  • Js浏览器全屏代码(模仿按F11)
  • js控制浏览器全屏示例代码
  • 利用浏览器全屏api实现js全屏
  • JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
  • javascript实现控制浏览器全屏
  • 浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
  • JavaScript控制浏览器全屏显示简单示例

事件监听

退出全屏

document.addEventListener("fullscreenchange", function () { 
fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";}, false); 

document.addEventListener("mozfullscreenchange", function () { 
fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";}, false); 

document.addEventListener("webkitfullscreenchange", function () { 
fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";}, false); 
document.addEventListener("msfullscreenchange", function () { 
fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";}, false); 

  document.cancelFullScreen()

全屏样式设置
在浏览器全屏的使用我们还可以进行样式设置

Document.fullScreen

html:-moz-full-screen { 
background: red; 
} 

html:-webkit-full-screen { 
background: red; 
} 

html:fullscreen { 
background: red; 
} 

  如果用户在全屏模式下,则返回true

附录

 document.fullScreenElement

1 一个在线的Demo

  返回当前处于全屏模式下的元素

   

   下面的代码是开启全屏模式:

2   HTML5全屏API之网络钓鱼

function fullScreen(element) { 
  if(element.requestFullScreen) { 
  element.requestFullScreen(); 
 } else if(element.webkitRequestFullScreen ) { 
   element.webkitRequestFullScreen(); 
  } else if(element.mozRequestFullScreen) { 
  element.mozRequestFullScreen(); 
 } 
 } 

     

    下面的代码就是整个页面调用全屏模式

3   jquery封装的全屏插件

      不过老实说,FULL SCREEN有个问题,容易造成欺骗,比如在
中,其中就有一个很好的DEMO,去欺骗了,比如某个链结写的是,大家以为是美国银行,一点进去,因为使用了全屏幕API,就会欺骗到人 

    

$('html').on('click keypress', 'a', function(event) { 
  // 不响应真正的A HREF点击事件 
 event.preventDefault(); 
  event.stopPropagation(); 
  // Trigger fullscreen 
  if (elementPrototype.requestFullscreen) { 
   document.documentElement.requestFullscreen(); 
  } else if (elementPrototype.webkitRequestFullScreen) { 
   document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); 
  } else if (elementPrototype.mozRequestFullScreen) { 
   document.documentElement.mozRequestFullScreen(); 
  } else { 
   // 
  } 
  //显示假的UI 
  $('#menu, #browser').show(); 
  $('#target-site').show(); 
 }); 

4  更加详细的全屏API介绍

下面给大家介绍JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍

    4.1

浏览器全屏模式的启动函数requestFullscreen仍然需要附带各浏览器的js方言前缀,相信下面这段代码需要你花大量的搜索才能凑齐:

    4.2 

代码如下:

5  HTML5全屏API在FireFox/Chrome中的显示差异

// 判断各种浏览器,找到正确的方法
function launchFullscreen(element) {
 if(element.requestFullscreen) {
  element.requestFullscreen();
 } else if(element.mozRequestFullScreen) {
  element.mozRequestFullScreen();
 } else if(element.webkitRequestFullscreen) {
  element.webkitRequestFullscreen();
 } else if(element.msRequestFullscreen) {
  element.msRequestFullscreen();
 }
}
// 启动全屏!
launchFullScreen(document.documentElement); // 整个网页
launchFullScreen(document.getElementById("videoElement")); // 某个页面元素

   

对你想要全屏显示的页面元素调用全屏方法,浏览器窗口就会变成全屏,但会先请求用户允许全屏模式。要注意,用户很有可能会拒绝全屏模式。如果用户运行全屏模式,则浏览器的工具条等按钮菜单都会隐藏,你的页面会覆盖整个屏幕。

您可能感兴趣的文章:

  • JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
  • Js浏览器全屏代码(模仿按F11)
  • js控制浏览器全屏示例代码
  • 利用浏览器全屏api实现js全屏
  • JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
  • javascript实现控制浏览器全屏
  • 浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
  • js实现各浏览器全屏代码实例
  • JavaScript控制浏览器全屏显示简单示例

退出全屏模式

这个exitFullscreen方法(也需要加浏览器前缀)会让浏览器退出全屏模式,变成正常模式。

 代码如下:

// 判断浏览器种类
function exitFullscreen() {
 if(document.exitFullscreen) {
  document.exitFullscreen();
 } else if(document.mozCancelFullScreen) {
  document.mozCancelFullScreen();
 } else if(document.webkitExitFullscreen) {
  document.webkitExitFullscreen();
 }
}
// 退出全屏模式!
exitFullscreen();

需要注意的是,exitFullscreen只能由document对象调用,而不是启动全屏时传入的对象。

全屏属性和事件

不幸的是,全屏属性和事件的相关方法也需要添加浏览器前缀,但我相信很快就不需要这样做了。

1.document.fullScreenElement: 全屏显示的网页元素。
2.document.fullScreenEnabled: 判断当前是否处于全屏状态。

fullscreenchange事件会在启动全屏或退出全屏时触发:

 代码如下:

var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;

你仍然可以使用上面判断浏览器种类的方法给这个事件加上前缀。

全屏样式CSS

各种浏览器都提供了一个非常有用的全屏模式时的css样式规则:

 代码如下::

-webkit-full-screen {

 /* properties */
}
:-moz-full-screen {
 /* properties */
}
:-ms-fullscreen {
 /* properties */
}
:full-screen { /*pre-spec */
 /* properties */
}
:fullscreen { /* spec */
 /* properties */
}
/* deeper elements */
:-webkit-full-screen video {
 width: %;
 height: %;
}
/* styling the backdrop*/
::backdrop {
 /* properties */
}
::-ms-backdrop {
 /* properties */
}

有些情况下,WebKit样式会出现一些问题,你最好把这些样式保持简洁。

这些全屏API都超级的简单,而且超级的有用。我第一次是在MDN's BananaBread demo中看到这个API的,那是一个枪击游戏,正好需要全屏化,它使用了事件监听来检测全屏状态。记住这些好用的API,需要的时候可以顺手拈来。

 

您可能感兴趣的文章:

  • 用html5 js实现点击一个按钮达到浏览器全屏效果
  • Js浏览器全屏代码(模仿按F11)
  • js控制浏览器全屏示例代码
  • 利用浏览器全屏api实现js全屏
  • JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
  • javascript实现控制浏览器全屏
  • 浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
  • js实现各浏览器全屏代码实例
  • JavaScript控制浏览器全屏显示简单示例
TAG标签: 韦德娱乐1946
版权声明:本文由韦德娱乐1946_韦德娱乐1946网页版|韦德国际1946官网发布于韦德娱乐1946网页版,转载请注明出处:js达成各浏览器全屏代码实例【韦德娱乐1946网页