利用浏览器全屏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检测对象中是否存在某个属性判断方法小结
May 19 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
JavaScript数组方法总结分析
May 06 Javascript
JavaScript中绑定事件的三种方式及去除绑定
Nov 05 Javascript
用file标签实现多图文件上传预览
Feb 14 Javascript
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 Javascript
详解webpack自定义loader初探
Aug 29 Javascript
Vue项目history模式下微信分享爬坑总结
Mar 29 Javascript
js根据后缀判断文件文件类型的代码
May 09 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的ASP防火墙
2006/10/09 PHP
php自动注册登录验证机制实现代码
2011/12/20 PHP
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
php简单获取文件扩展名的方法
2015/03/24 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
ExtJs的Date格式字符代码
2010/12/30 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
JavaScript实现QQ列表展开收缩扩展功能
2017/10/30 Javascript
js面向对象之实现淘宝放大镜
2020/01/15 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
2020/11/13 Javascript
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
python如何获取列表中每个元素的下标位置
2019/07/01 Python
python判断一个对象是否可迭代的例子
2019/07/22 Python
python的scipy实现插值的示例代码
2019/11/12 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
Python实现一个优先级队列的方法
2020/07/31 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
浅析python连接数据库的重要事项
2021/02/22 Python
HTML5实现签到 功能
2018/10/09 HTML / CSS
TripAdvisor台湾:全球最大旅游网站
2018/08/26 全球购物
新郎新娘婚礼答谢词
2014/01/11 职场文书
学生会主席事迹材料
2014/01/28 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
初三学生评语大全
2014/04/24 职场文书
介绍信样本
2015/01/31 职场文书
js Proxy的原理详解
2021/05/25 Javascript
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL
html5表单的required属性使用
2021/07/07 HTML / CSS