利用浏览器全屏api实现js全屏


Posted in Javascript onJanuary 16, 2014
(function () {
 var fullScreenApi = {
  supportsFullScreen : false,
  isFullScreen : function () {
   return false;
  },
  requestFullScreen : function () {},
  cancelFullScreen : function () {},
  fullScreenEventName : '',
  prefix : ''
 },
 browserPrefixes = 'webkit moz o ms khtml'.split(' ');
 // check for native support
 if (typeof document.cancelFullScreen != 'undefined') {
  fullScreenApi.supportsFullScreen = true;
 } else {
  // check for fullscreen support by vendor prefix
  for (var i = 0, il = browserPrefixes.length; i < il; i++) {
   fullScreenApi.prefix = browserPrefixes[i];
   if (typeof document[fullScreenApi.prefix + 'CancelFullScreen'] != 'undefined') {
    fullScreenApi.supportsFullScreen = true;
    break;
   }
  }
 }
 // update methods to do something useful
 if (fullScreenApi.supportsFullScreen) {
  fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange';
  fullScreenApi.isFullScreen = function () {
   switch (this.prefix) {
   case '':
    return document.fullScreen;
   case 'webkit':
    return document.webkitIsFullScreen;
   default:
    return document[this.prefix + 'FullScreen'];
   }
  }
  fullScreenApi.requestFullScreen = function (el) {
   return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen']();
  }
  fullScreenApi.cancelFullScreen = function (el) {
   return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen']();
  }
 }
 // jQuery plugin
 if (typeof jQuery != 'undefined') {
  jQuery.fn.requestFullScreen = function () {
   return this.each(function () {
    if (fullScreenApi.supportsFullScreen) {
     fullScreenApi.requestFullScreen(this);
    }
   });
  };
 }
 // export api
 window.fullScreenApi = fullScreenApi;
})();
$(function(){
 $("#fullScreenBtn").click(function(){
  $("#fullScreen").requestFullScreen();
 });
 if(window.top != self){
  $("#tip").text("iframe里面不能演示该功能!请点击右下角的全屏查看!").show();
 }
});
if (!fullScreenApi.supportsFullScreen) {
 alert("您的破浏览器不支持全屏API哦,请换高版本的chrome或者firebox!");
}
<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>javascript启用全屏</title> <script id="jquery_183" type="text/javascript" class="library" src=jquery-1.8.3.min.js"></script>
 </head>
 <body>
  <button id="fullScreenBtn">点击我进入全屏模式</button>
  <div id="fullScreen" class="fullScreen">
    <h1>
     我是全屏区域的内容!
   </h1>
   <div id="tip" style="display:none;">
   </div>
  </div>
 </body>
</html>
body{
background:#fff;
}
button{
 border:1px solid #ccc;
 cursor:pointer;
  display:block;
  margin:auto;
  position:relative;
  top:100px;
}
.fullScreen{
 padding-top:10%;
 text-align:center;
 background: none repeat scroll 0 0 #FFFFFF;
}
/* Mozilla proposal (dash) */
.fullScreen:full-screen {
    width:100%;
    height:100%;
}
/* W3C proposal (no dash) */
.fullScreen:fullscreen {
    width:100%;
    height:100%;
}
/* currently working vendor prefixes */
.fullScreen:-webkit-full-screen, .fullScreen:-moz-full-screen {
    width:100%;
    height:100%;
}
:-webkit-full-screen{
width:100%;
    height:100%;
}
Javascript 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
javascript qq右下角滑出窗口 sheyMsg
Mar 21 Javascript
工作中常用到的JS表单验证代码(包括例子)
Nov 11 Javascript
javascript动画算法实例分析
Jul 31 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
Oct 26 Javascript
jquery属性,遍历,HTML操作方法详解
Sep 17 Javascript
JavaScript设计模式之策略模式详解
Jun 09 Javascript
vue-router 权限控制的示例代码
Sep 21 Javascript
Vue组件化开发思考
Feb 02 Javascript
async/await让异步操作同步执行的方法详解
Nov 01 Javascript
uni-app如何实现增量更新功能
Jan 03 Javascript
vue 遮罩层阻止默认滚动事件操作
Jul 28 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
Jan 15 #Javascript
JS和Jquery获取和修改label的值的示例代码
Jan 15 #Javascript
javascript中验证大写字母、数字和中文
Jan 15 #Javascript
setTimeout自动触发一个js的方法
Jan 15 #Javascript
JS记录用户登录次数实现代码
Jan 15 #Javascript
为指定的元素添加遮罩层的示例代码
Jan 15 #Javascript
js判断数据类型如判断是否为数组是否为字符串等等
Jan 15 #Javascript
You might like
JS与PHP向函数传递可变参数的区别实例代码
2011/05/18 PHP
php.ini 配置文件的深入解析
2013/06/17 PHP
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
[原创]PHP正则匹配中英文、数字及下划线的方法【用户名验证】
2017/08/01 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
jQuery开发者都需要知道的5个小技巧
2010/01/08 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
dojo学习第二天 ajax异步请求之绑定列表
2011/08/29 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
基于javascript实现图片左右切换效果
2016/01/25 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
2016/03/03 Javascript
jQuery 跨域访问解决原理案例详解
2016/07/09 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
React实现评论的添加和删除
2020/10/20 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
使用rst2pdf实现将sphinx生成PDF
2016/06/07 Python
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
Python基于Socket实现的简单聊天程序示例
2017/08/05 Python
python实现门限回归方式
2020/02/29 Python
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
司机的工作范围及职责
2013/11/13 职场文书
财务部经理岗位职责
2014/02/03 职场文书
英语老师推荐信
2014/02/26 职场文书
欢迎标语大全
2014/06/21 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
先进工作者事迹材料
2014/12/23 职场文书
表扬通报怎么写
2015/01/16 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
稽核岗位职责范本
2015/04/13 职场文书
《游戏公平》教学反思
2016/02/20 职场文书