javascript 实现全屏

1 可以添加事件,全屏错误事件

2 IE11以上

3 chrome全屏需要设置元素的宽度、高度,否则显示的是缩略大小

GLOBAL.BigScreen = function(node)
{
  this._enable = false;
  this._node = null;
  var v_node = typeof node == "string" ? document.getElementById(node) : node;
  if(typeof(v_node) == "undefined" || v_node == null)
  {
     this._node = document;
  }else
  {
     this._node = v_node;
  }
  if (document.fullscreenEnabled ||document.webkitFullscreenEnabled ||document.mozFullScreenEnabled ||document.msFullscreenEnabled)
  {
      this._enable = true;
  }
}
GLOBAL.BigScreen.prototype.enable = function()
{
   return this._enable;
}

GLOBAL.BigScreen.prototype.isFullScreen = function()
{
   if(document.fullscreenElement ||document.webkitFullscreenElement ||document.mozFullScreenElement ||document.msFullscreenElement)
   {
      return true;
   }else
   {
      return false;
   }
}
GLOBAL.BigScreen.prototype.toggle = function()
{
   if(this._enable == false)
   {
      this._defaultToFullScreen();
      return;
   }
   var req = null;
   if(this.isFullScreen())
   {
      req = this._node.exitFullscreen|| this._node.webkitExitFullscreen || this._node.mozCancelFullScreen || this._node.msExitFullscreen;
      req.call(this._node);
  }else
  {
   if(this._node.nodeName == "#document")
   {
       req = this._node.body.requestFullscreen || this._node.body.webkitRequestFullscreen || this._node.body.mozRequestFullScreen || this._node.body.msRequestFullscreen;
       req.call(this._node.body);
   }
   else
   {
       req = this._node.requestFullscreen || this._node.webkitRequestFullscreen || this._node.mozRequestFullScreen || this._node.msRequestFullscreen;
       req.call(this._node);
   }
  }

}

GLOBAL.BigScreen.prototype.addOnFullScreenError = function(handler,scope){
      if(this._enable == false)
          return  null;
      if (document.fullscreenEnabled) {
          return GLOBAL.Event.on(document,"fullscreenerror",handler,scope);
      } else if (document.webkitFullscreenEnabled) {
          return  GLOBAL.Event.on(document,"webkitfullscreenerror",handler,scope);
      } else if (document.mozFullScreenEnabled) {
          return GLOBAL.Event.on(document,"mozfullscreenerror",handler,scope);
      } else if (document.msFullscreenEnabled) {
          return GLOBAL.Event.on(document,"MSFullscreenError",handler,scope);
      }
 }

GLOBAL.BigScreen.prototype.addOnFullscreenChange= function(handler,scope){
      if(this._enable == false)
          return;
      if (document.fullscreenEnabled) {
           GLOBAL.Event.on(document,"fullscreenchange",handler,scope);
       } else if (document.webkitFullscreenEnabled) {
           GLOBAL.Event.on(document,"webkitfullscreenchange",handler,scope);
       } else if (document.mozFullScreenEnabled) {
           GLOBAL.Event.on(document,"mozfullscreenchange",handler,scope);
       } else if (document.msFullscreenEnabled) {
            GLOBAL.Event.on(document,"MSFullscreenChange",handler,scope);
        }
 }

GLOBAL.BigScreen.prototype._defaultToFullScreen = function()
{
    if(this._enable)
      return;
    if (typeof window.ActiveXObject !== "undefined") {
    var wscript = new ActiveXObject("WScript.Shell");
    if (wscript !== null) {
      wscript.SendKeys("{F11}");
    }
  }
}
时间: 2024-08-30 08:21:53

javascript 实现全屏的相关文章

JavaScript实现全屏显示

<!doctype html> <html> <head> <title>全屏显示</title> <meta charset="utf-8" /> <style> div { width: 200px; height:200px; background:pink; margin:100px auto; } button { margin-left: 650px; } h1 { margin-left:

javascript无缝全屏轮播

虽然平时能利用插件来实现,但是总是觉得,如果连个无缝轮播都写不出来,还玩个毛线: 其实现在还真的是玩毛线,因为代码都是别人的,不过嘛,很快就变成是我的啦! 代码还没封装成插件,其实我也还没弄清楚. 下面有很多注释的,如果路过的你认为有错误,请指出来啊,使劲拍. html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-C

javascript中全屏滑动效果实现

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } ul, ol { list-style: none; } html, body, ul, ul li { width: 100%; height: 100

JavaScript特效实例011-弹出全屏显示的网页模式对话框

实例011                    弹出全屏显示的网页模式对话框 实例说明 弹出全屏显示的网页模式对话框,用户关闭之前不能浏览网站的其他内容. 技术要点 本实例主要应用screen对象的width.height属性和window对象的showModalDialog()方法实现.其实还有一种方法打开网页对话框,即showModelessDialog()方法. 使用showModalDialog()与showModelessDialog()方法的区别在于,showModalDialog

[JavaScript] 用html5 js实现浏览器全屏

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

【温故而知新】Javascript窗口效果 (全屏显示窗口、定时关闭窗口)

1.全屏显示窗口 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="

使用CSS3和JavaScript创建一个光滑,动画的全屏搜索表单

设计良好且易于访问的搜索UI可以鼓励用户更频繁地与您网站的搜索功能进行互动,从而提高用户满意度并增加页面浏览量.为此,随着小屏幕设备的主导地位,搜索盒的趋势是使它们变得非常大和大胆.在本教程中,我们将逐步介绍如何创建一个精美,精心设计的全屏搜索表单,该表单可以在所有现代浏览器和设备上运行良好. 创建标题和搜索图标界面 首先,我们将使用左侧徽标的经典图案和一些导航链接以及最右侧的搜索图标快速整理标题部分,所有内容都垂直居中.最终点击图标将触发全屏搜索框.而不是使用CSS花车,我们将转向 CSS F

使用javascript实现浏览器全屏

HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做 全屏API,游戏呀,等都很有用.先看常见的API 1 element.requestFullScreen() 作用:请求某个元素element全屏 2 Document.getElementById(“myCanvas”).requestFullScreen() 这里是将其中的元素ID去请求fullscreen 3 退出全屏   document.cancelFullScreen() 4 Do

html5 video全屏实现方式

首先来说,这个标题具有误导性,但这样设置改标题也是主要因为video使用的比较多 在html5中,全屏方法可以适用于很多html 元素,不仅仅是video <!doctype  html> <html> <head> <meta charset="utf-8" />     <title>全屏问题</title>     <meta http-equiv="content-type" co