利用浏览器全屏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事件列表解说
Dec 22 Javascript
JavaScript RegExp方法获取地址栏参数(面向对象)
Mar 10 Javascript
Jquery实战_读书笔记2 选择器
Jan 22 Javascript
JavaScript 以对象为索引的关联数组
May 19 Javascript
js 函数的副作用分析
Aug 23 Javascript
JavaScript实现页面5秒后自动跳转的方法
Apr 16 Javascript
jQuery表单对象属性过滤选择器实例详解
Sep 13 Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 Javascript
利用js-cookie实现前端设置缓存数据定时失效
Jun 18 Javascript
VUEX 数据持久化,刷新后重新获取的例子
Nov 12 Javascript
Vue混入mixins滚动触底的方法
Nov 22 Javascript
OpenLayers实现图层切换控件
Sep 25 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中一个完整表单处理实现代码
2011/11/10 PHP
PHP __autoload()方法真的影响性能吗?
2012/03/30 PHP
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
php去除html标记的原生函数详解
2015/01/27 PHP
Prototype Number对象 学习
2009/07/19 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
AngularJS 实现按需异步加载实例代码
2015/10/18 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
Vue表单验证插件的制作过程
2017/04/01 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
2018/04/23 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
vue实现给div绑定keyup的enter事件
2020/07/31 Javascript
深入了解Vue动态组件和异步组件
2021/01/26 Vue.js
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
Python实现爬取需要登录的网站完整示例
2017/08/19 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
python解析xml简单示例
2019/06/21 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
python线程信号量semaphore使用解析
2019/11/30 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
Python错误的处理方法
2020/06/23 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
小学英语教学反思案例
2014/02/04 职场文书
优秀团支部事迹材料
2014/02/08 职场文书
园林技术个人的自我评价
2014/02/15 职场文书
运动会方队口号
2014/06/07 职场文书
广告业务员岗位职责
2015/02/13 职场文书
2015年司法局工作总结
2015/05/22 职场文书
2016年学校十一国庆节活动总结
2016/04/01 职场文书
2019消防宣传标语!
2019/07/10 职场文书