当前位置:  编程技术>WEB前端

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

    来源: 互联网  发布时间:2014-08-25

    本文导语:  代码如下:(function () { var fullScreenApi = {  supportsFullScreen : false,  isFullScreen : function () {   return false;  },  requestFullScreen : function () {},  cancelFullScreen : function () {},  fullScreenEventName : '',  prefix : '' }, browserPrefixes = 'webkit moz o ...

代码如下:

(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!");
}

代码如下:



 
  
  javascript启用全屏

 

    
 
 

您可能感兴趣的文章:

  • 浏览器漏洞利用框架 BeEF
  • 利用浏览器的Javascript控制台调试PHP程序
  • 怎样实现利用fprintf,输出定长字串,位数不足时在左侧填入指定字符填充。。
  • 利用ftp,怎样在远程主机上实现类似cp的功能???
  • 求助!!!怎么实现micro2440利用独立的IP地址上互联网?
  • PXA270下利用IIS通道实现音频,重复启动死机问题求解
  • 如何利用ebtables实现Vlan Qos
  • 利用文件系统过滤驱动实现 类似还原卡功能 的原理是什么?
  • Linux下利用MC35实现GPRS上网的问题
  • 如何利用gawk实现下列功能?
  • 利用smsmanager实现后台发送短信示例
  • C#利用反射来判断对象是否包含某个属性的实现方法
  • 我怎么利用smb实现与window的共享啊
  • 利用C++实现从std::string类型到bool型的转换
  • 菜鸟问题:请大家用简单的代码描述一下,如何利用接口实现多重继承!
  • 如何利用java实现屏幕拷贝的问题
  • 利用windows任务计划实现oracle的定期备份
  • 利用MySQL函数实现判断视频扩展名的代码
  • python利用elaphe制作二维条形码实现代码
  • 利用iptables实现简单路由的问题
  • 利用管道实现sudo命令免输入密码的方法
  • 不太明白,利用RMI实现JAVA分布式应用 和 EJB实现JAVA分布式应用有什么区别。
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • linux c下利用srand和rand函数生成随机字符串
  • 请问:Linux下用C编程计算CPU利用率和内存利用率?
  • linux下利用(cat,strings,head,sed)命令生成随机字符串
  • 在2003下利用vmware安装了linux,又利用host-only方式上了网,问题如下多谢指点!!!
  • Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行
  • 大虾 紧急求助!!!!如何求得当前机子的处理器利用率和内存利用率?
  • 如何利用libpcap和Python嗅探数据包
  • 如何利用Bash脚本(利用awksedgrepwc等)来自动修改配置文件
  • windows堆栈溢出利用的七种方式
  • 求RADIUS的动态分配IP的问题(利用IPPOOL)
  • iowait和cpu利用率的权衡问题
  • 利用java.net.URLConnection上传文件
  • Qt中利用槽如何来传递参数
  • 怎么样利用Socket进行Java网络编程
  • 请问如何编程获得CPU利用率?(空)
  • 如何利用Linux安装盘制作启动盘?
  • 谁知道linux/unix下利用Schema读取校验xml的开源代码,给一个链接,谢谢!
  • CPU、内存、数据库利用率监控
  • 怎样利用u-boot烧写??
  • 根目录 / 文件利用过高, 啥办法?
  • 利用 mount 函数 如何 挂载 USB 设备 ntfs 分区?




  • 特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3