利用浏览器全屏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 相关文章推荐
在JavaScript中实现类的方式探讨
Aug 28 Javascript
通过Javascript读取本地Excel文件内容的代码示例
Apr 08 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
May 04 Javascript
angularjs表格ng-table使用备忘录
Mar 09 Javascript
js实现的在线调色板功能完整实例
Dec 21 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
利用Node.js检测端口是否被占用的方法
Dec 07 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
jQuery实现图片下载代码
Jul 18 jQuery
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 Javascript
js+canvas实现刮刮奖功能
Sep 13 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
PHP缩略图生成和图片水印制作
2017/01/07 PHP
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
jquery实现智能感知连接外网搜索
2013/05/21 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
2017/01/04 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
vue分类筛选filter方法简单实例
2017/03/30 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
2019/07/16 jQuery
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
python中引用与复制用法实例分析
2015/06/04 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
django fernet fields字段加密实践详解
2019/08/12 Python
Python新手学习装饰器
2020/06/04 Python
浅析关于Keras的安装(pycharm)和初步理解
2020/10/23 Python
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
2020/04/08 HTML / CSS
英国第二大营养品供应商:Vitabiotics
2016/10/01 全球购物
类、抽象类、接口的差异
2016/06/13 面试题
正隆泰信息技术有限公司上机题
2012/06/14 面试题
软件工程专业推荐信
2013/10/28 职场文书
平面设计师的工作职责
2013/11/21 职场文书
校园自助餐厅的创业计划书
2013/12/26 职场文书
食品安全宣传标语
2014/06/07 职场文书
村委会贫困证明范本
2014/09/17 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
浅谈MySQL之浅入深出页原理
2021/06/23 MySQL
box-shadow单边阴影的实现
2023/05/21 HTML / CSS