requestFullscreen实现全屏展示
requestFullscreen实现全屏展示.
var fullContainer = document.getElementById('fullScreenContainer');
//先把元素展示出来
fullContainer.style.display = "block";
// 在调用Element.requestFullScreen()前,可建立 fullscreenchange 的事件处理,将方便调试是否成功请求全屏模式。
if (fullContainer.requestFullscreen) { // Opera
fullContainer.requestFullscreen();
}
// IE
else if (fullContainer.msRequestFullscreen) {
fullContainer.msRequestFullscreen();
}
// 火狐浏览器
else if (fullContainer.mozRequestFullScreen) {
fullContainer.mozRequestFullScreen();
}
// 谷歌浏览器、android浏览器
else if (fullContainer.webkitRequestFullScreen) {
fullContainer.webkitRequestFullScreen();
}
document.exitFullScreen() 方法用于将文档请求退出全屏模式
document.exitFullScreen() 兼容处理
d. Opera
oExitFullScreen()
requestFullscreen实现全屏展示的更多相关文章
- js控制页面的全屏展示和退出全屏显示
<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...
- JavaScript 全屏展示
浏览器都有页面全屏的功能 F11 ,那么如何用JavaScript控制页面全屏呢?MDN上提供的的API , 一个小demo验证一下! <!DOCTYPE html> <html l ...
- echarts图表自适应盒子的大小(盒子的大小是动态改变的),大到需要全屏展示
项目中用到了echarts,并且页面是自适应的,且页面中有一个[放大.缩小]功能,因此图表还需要根据盒子的大小来变化. 即:两个需求,如下: ① 图表根据窗口的大小自适应 ② 图表根据所在盒子的大小自 ...
- h5的api dom全屏展示
下面是完整的例子,暂不做分析 <!DOCTYPE html> <html> <head> <title> FullScreen API 演示</t ...
- 原 HTML5 requestFullScreen&exitFullscreen全屏兼容方案
摘要: html5 video全屏实现方式 首先来说,这个标题具有误导性,但这样设置改标题也是主要因为video使用的比较多 在html5中,全屏方法可以适用 ...
- HTML5在手机端实现视频全屏展示
最近做项目,遇到一个问题,在手机上要实现视频的全屏播放功能.测试了很久,终于找到解决办法. 第一种:将视频放大来控制. 视频在播放的时候,全屏是根据高度来的,如果设置视频 video 标签的宽度是 1 ...
- 给echarts加个“全屏展示”
echarts的工具箱并没有提供放大/全屏的功能, 查找文档发现可自定义工具https://www.echartsjs.com/option.html#toolbox.feature show代码 t ...
- 开机自动调用.bat文件且浏览器全屏展示
1,将 .bat文件放入到以下路径中 C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Startup 或 C:\Users\Administr ...
- vmware中Ubuntu不能全屏展示的问题
依次打开system settings---------------->Displays----------------->resoluiton调整分辨率,然后右下角点击apply,然后k ...
随机推荐
- kaptcha验证码
@Action("/validimg") public String validimg() throws Exception { genernateCaptchaImage(); ...
- Android-Binder 简析
前言 对于Android来说,Binder的重要性怎么说都不为过.不管是我们的四大组件Activity.Service.BroadcastReceiver.ContentProvider,还是经常在应 ...
- 【Spark】SparkContext源代码解读
SparkContext的初始化 SparkContext是应用启动时创建的Spark上下文对象,是进行Spark应用开发的主要接口,是Spark上层应用与底层实现的中转站(SparkContext负 ...
- jstl的错误总结与解决方法
哎,真他娘的无语了,jstl标签竟然还与tomcat的版本有关.一会报错:java.lang.AbstractMethodError: javax.servlet.jsp.PageContext.ge ...
- 3)Win10-UWA开发 API參考 - 2
孙广东 2015.8.23 二.适用于 UWP 应用的 .NET 摘要 适用于 UWP 应用的 .NET 提供一组托管类型.你能够利用这组托管类型通过 C# 或 Visual Basic 创建 ...
- 转: Eclispe的远程开发
from: http://www.thinksaas.cn/topics/0/528/528009.html 新项目中用到了所谓的Eclipse远程开发.参考: http://www.eclipse. ...
- PS如何使用制作图片投影效果
如果仅仅是同样大小的背景(灰色或者黑色),则只要新建一个和比原图大三个像素的文件(比如这里原图片为100×100,我就建立一个103×103的文件)把图片放在左上角,剩下的部分填充灰色或者黑色.然而这 ...
- eclipse 内存配置
-server -Xms256m -Xmx512m -XX:PermSize=128M -XX:MaxPermSize=256m -XX:+UseG1GC
- Oracle 查询用户表信息,导入导出处理表空间不一致
select table_name,tablespace_name from user_tables t; //查询用户默认表空间信息 SELECT t.* FROM USER_USERS t; 导入 ...
- SpringMVC传值(对象或字符串)给前台js
java对象到js对象 1.先使用Jackson把对象转换成json串 ObjectMapper objectMapper = new ObjectMapper(); String json = ob ...