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. mysql explain分析列名

    每个列的简单解释如下: select_type:表示 SELECT 的类型,常见的取值有 SIMPLE(简单表,即不使用表连接或者子查询).PRIMARY(主查询,即外层的查询).UNION(UNI ...

  2. ASP.NET MVC学习---(四)MVC初窥

    前面三篇大幅度的介绍了EF框架 这并不是没有道理的 现在使用mvc开发一般都离不开ef 因为它们相结合可以为你带来完美的体验 当然 前面所描述的仅仅是ef框架的冰山一角 它是一门学问很深的功课 如果你 ...

  3. ASP.NET MVC学习---(三)EF简单增删改查

    那么现在我们已经大概从本质上了解了ef 巴拉巴拉说了一大堆之后 总算要进入ef的正题了 总在口头说也太不行了是吧~ 没错,现在要用ef进行一些实际的操作 做什么呢? 就做一个入门级的增删改查操作吧 废 ...

  4. idea 搭建spring boot

    打开IntelliJ IDEA,在菜单栏选择File菜单-->New-->Project...-->Spring Initializr,Project SDK即选择JDK的版本,Ch ...

  5. DataSet之增删改查操作(DataGridView绑定)

    DataSet数据集,数据缓存在客户端内存中,支持断开式连接.DataGridView控件绑定DataSet时,它自动的改变的DS的行的状态,而且在做增删改查的时候,可以借助SqlCommandBui ...

  6. java学习笔记——Collection集合接口

    NO 方法名称 描述 1 public boolean add(E e) 向集合中保存数据 2 public void clear() 清空集合 3 public boolean contains(O ...

  7. MySql中文乱码问题(3)

    MySql的client是在dos界面上,然而dos界面默认的字符集编码方式是:GBK (1).MySql字符转换原理图 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi ...

  8. 系统重装 U盘安装XP操作系统开机出现提示txtsetup.sif怎么办

    你的这个问题 是安装xp时把xp做成u盘出现的 原因是xp没有在根本上支持这种安装 到win7后才支持的 解决方法有以下几种 1,刻录成cd 2重新下载xp ghost版的不会出现这个问题 3证实Ul ...

  9. Centos——升级Python2.7及安装pip

    CentOS升级Python2.7及安装pip 1) 升级Python2.7 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ...

  10. epoll使用详解(精髓)(转)

    epoll - I/O event notification facility 在linux的网络编程中,很长的时间都在使用select来做事件触发.在linux新的内核中,有了一种替换它的机制,就是 ...