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() 兼容处理

a. chrome(谷歌浏览器、android浏览器)
webkitExitFullScreen()
b. firefox(火狐浏览器)
mozCancleFullScreen()
Firefox 44 前的浏览器不允许在<frame>或<object>内的元素请求全屏;
在Firefox 44+,允许在顶层document(即body)内的元素或者<iframe>内的元素设置 allowfullScreen属性,则允许请求全屏显示;
c. IE
msExitFullScreen()

d. Opera

oExitFullScreen()

requestFullscreen实现全屏展示的更多相关文章

  1. js控制页面的全屏展示和退出全屏显示

    <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...

  2. JavaScript 全屏展示

    浏览器都有页面全屏的功能 F11 ,那么如何用JavaScript控制页面全屏呢?MDN上提供的的API , 一个小demo验证一下! <!DOCTYPE html> <html l ...

  3. echarts图表自适应盒子的大小(盒子的大小是动态改变的),大到需要全屏展示

    项目中用到了echarts,并且页面是自适应的,且页面中有一个[放大.缩小]功能,因此图表还需要根据盒子的大小来变化. 即:两个需求,如下: ① 图表根据窗口的大小自适应 ② 图表根据所在盒子的大小自 ...

  4. h5的api dom全屏展示

    下面是完整的例子,暂不做分析 <!DOCTYPE html> <html> <head> <title> FullScreen API 演示</t ...

  5. 原 HTML5 requestFullScreen&exitFullscreen全屏兼容方案

                         摘要: html5 video全屏实现方式 首先来说,这个标题具有误导性,但这样设置改标题也是主要因为video使用的比较多 在html5中,全屏方法可以适用 ...

  6. HTML5在手机端实现视频全屏展示

    最近做项目,遇到一个问题,在手机上要实现视频的全屏播放功能.测试了很久,终于找到解决办法. 第一种:将视频放大来控制. 视频在播放的时候,全屏是根据高度来的,如果设置视频 video 标签的宽度是 1 ...

  7. 给echarts加个“全屏展示”

    echarts的工具箱并没有提供放大/全屏的功能, 查找文档发现可自定义工具https://www.echartsjs.com/option.html#toolbox.feature show代码 t ...

  8. 开机自动调用.bat文件且浏览器全屏展示

    1,将 .bat文件放入到以下路径中 C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Startup 或 C:\Users\Administr ...

  9. vmware中Ubuntu不能全屏展示的问题

    依次打开system settings---------------->Displays----------------->resoluiton调整分辨率,然后右下角点击apply,然后k ...

随机推荐

  1. EF执行存储工程报错 String[4]: Size 属性具有无效大小值 0。

    EF中执行存储过程报错 String[4]: Size 属性具有无效大小值 0 排查后是如下问题所致,给定的参数没有设定大小(加入红框内的就可以了) private string GetCode(MC ...

  2. 墨卡托投影、高斯-克吕格投影、UTM投影及我国分带方法

    转自原文 墨卡托投影.高斯-克吕格投影.UTM投影及我国分带方法 一.墨卡托投影.高斯-克吕格投影.UTM投影 1. 墨卡托(Mercator)投影 墨卡托(Mercator)投影,是一种" ...

  3. gcc 4.8更新gcc 4.9 5.4版本等

    转载:http://www.linuxidc.com/Linux/2017-01/139976.htm 如果还在使用较旧版本的Ubuntu,或者是Ubuntu LTS,那么我们是很难体验新版gcc的. ...

  4. 工具分享:GitHub的克隆工具Cl0neMast3r,轻松搞定各种测试

    GitHub,相信大家并不陌生,咱搞技术的应该都会用到它,GitHub主要是进行代码工具的存储.下载等工作.今天介绍一款让我们操作GitHub相关工作变的更简单的工具, GitHub的克隆工具. Cl ...

  5. MySQL5.7 基于二进制包的安装

    1.MySQL5.7安装注意事项 1.在MySQL5.7中mysql_install_db已经不再推荐使用,建议改成mysqld-initialize 完成实力初始化.(mysql_install_d ...

  6. navigationItem的设置和titleView的设置

    设置导航栏中间的标题 self.navigationItem.title = @"title"; 设置导航栏的主题颜色 self.navigationBar.barTintColo ...

  7. node - 写返回mime类型

    何为mime类型?  mime.json { ".323":"text/h323" , ".3gp":"video/3gpp&qu ...

  8. SurfaceView实现拍照预览

    一.布局代码 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:andro ...

  9. python——操作符重载(重要)

    类可以重载python的操作符   旧认识:__X__的名字 是系统定义的名字:是python特殊方法专用标识.   操作符重载使我们的对象与内置的一样.__X__的名字的方法是特殊的挂钩(hook) ...

  10. Jmeter启动报注册表警告

    启动Jmeter后,控制台出现如下的警告: 主要出现的原因是: java.util.prefs.WindowsPreferences需要保存信息到HKEY_LOCAL_MACHINE\Software ...