文档章节

jquery实现浏览器全屏和浏览器退出全屏

Jim_Ai
 Jim_Ai
发布于 2016/05/10 18:18
字数 373
阅读 4478
收藏 14

js方法如下:

/*
 * 浏览器全屏
 */
function fullScreen() {

	  var el = document.documentElement;

	  var rfs = el.requestFullScreen || el.webkitRequestFullScreen;

	  if(typeof rfs != "undefined" && rfs) {

	    rfs.call(el);

	  } else if(typeof window.ActiveXObject != "undefined") {

	    var wscript = new ActiveXObject("WScript.Shell");

	    if(wscript != null) {

	        wscript.SendKeys("{F11}");

	    }

	}else if (el.msRequestFullscreen) {

		el.msRequestFullscreen();

	}else if(el.oRequestFullscreen){
		
		el.oRequestFullscreen();
		
    }else{
    	
    	swal({   title: "浏览器不支持全屏调用!",   text: "请更换浏览器或按F11键切换全屏!(3秒后自动关闭)", type: "error",  timer: 3000 });	
	       
    }

}

/*
 * 浏览器退出全屏
 */
function exitFullScreen() {

	  var el = document;

	  var cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.exitFullScreen;

	  if(typeof cfs != "undefined" && cfs) {

	    cfs.call(el);

	  } else if(typeof window.ActiveXObject != "undefined") {

	    var wscript = new ActiveXObject("WScript.Shell");

	    if(wscript != null) {

	        wscript.SendKeys("{F11}");

	    }

	}else if (el.msExitFullscreen) {

		el.msExitFullscreen();

	}else if(el.oRequestFullscreen){
		
		el.oCancelFullScreen();
		
    }else{ 
   	
    	swal({   title: "浏览器不支持全屏调用!",   text: "请更换浏览器或按F11键切换全屏!(3秒后自动关闭)", type: "error",  timer: 3000 });	
    }  
	  
}

此处没有支持火狐浏览器,是因为火狐已经不支持mozRequestFullScreen();的调用,会提示:

全屏请求被拒绝,因为 Element.mozRequestFullScreen() 不是在一个短期运行的由用户引发的事件处理代码段中运行的。

可以改成window.open(),这里根据项目实际情况改为提示信息。

在指定页面上引入

<script type="text/javascript" src="/jsFile/index/fullScreen.js"></script>	

在页面上调用对应的js方法

<li class="dropdown">
	<a href="javascript:fullScreen();">
		<i class="fa fa-desktop"></i> 全屏
	</a>
</li>
<li class="dropdown">
	<a href="javascript:exitFullScreen();">
		<i class="fa fa-desktop"></i> 退出全屏
	</a>
</li>

 

© 著作权归作者所有

Jim_Ai
粉丝 3
博文 15
码字总数 7002
作品 0
虹口
部门经理
私信 提问
分享一个帮助用户全屏阅读的jQuery插件 - jQuery fullscreen

日期:2012/02/06 来源:GBin1.com 在线演示 在线下载 今天介绍一款帮助网站提高用户体验的jQuery插件 - jQuery fullscreen,它能够帮助网站实现针对阅读内容的全屏显示功能。 这个插件基于F...

gbin1
2012/02/07
134
0
用CSS3实现全屏按比例缩放背景图片

平常看到这种效果都是出现在FLASH全屏动画网站上(用AS来控制),今天发现原来CSS也可以实现这种效果。 核心代码: html {background: url(bg.jpg) no-repeat center center fixed;-webkit-...

叛道
2012/08/13
5.9K
0
《JavaScript实用效果整理》系列分享专栏

整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 《JavaScript实用效果整理》已整理成PDF文档,点击可直接下载至本地查阅...

开元中国2015
2018/10/29
60
0
8 个 jQuery 的图片展示插件和教程

Nivo Slider Nivo Slider虽然没有太多改善,但你可以用jQuery插件来创建图像,简单、有效. Sponsor Flip Wall With jQuery & CSS Sponsor Flip Wal 使用 PHP、CSS 和 jQuery ,通过 jQuery F...

红薯
2011/11/01
3.7K
4
为开发者们准备的 10 款超棒的 jQuery 视频插件

跟之前介绍的 2013 年 12 月最好的 35+个 jQuery 插件 不同,这篇文章是给开发者们准备的关于视频播放方面的 10 款最好的 jQuery 视频插件。这 10 款插件各有各的特色,能很方便的在网页上嵌...

oschina
2014/01/17
20.8K
13

没有更多内容

加载失败,请刷新页面

加载更多

Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
29分钟前
2
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
6
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
6
0
【技术分享】TestFlight测试的流程文档

上架基本需求资料 1、苹果开发者账号(如还没账号先申请-苹果开发者账号申请教程) 2、开发好的APP 通过本篇教程,可以学习到ios证书申请和打包ipa上传到appstoreconnect.apple.com进行TestF...

qtb999
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部