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. 利用json2csharp快速生成C#类

    有的时候,我们需要将一些Json格式的字符串反序列化为.Net对象,虽然有强大的Json.net可以帮助我们快速完成这一操作.但首先仍需要我们根据Json数据手动编写C#类,这也是一件比较枯燥而容易出 ...

  2. Intellij IDEA 14.x 菜单项中Compile、Make和Build的区别

    Compile.Make和Build的区别 针对Java的开发工具,一般都有Compile.Make和Build三个菜单项,完成的功能的都差不多,但是又有区别. 编译,是将源代码转换为可执行代码的过程 ...

  3. Android可伸缩列表ExpandableListView

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  4. python 中的 sorted

    1) 输入help(sorted)可以得到下面类容: ------------------------------------------------------------------------- ...

  5. HUD2795 线段树(单点更新)

    题目中给出的h和w范围均大,其实n的最大范围才200000,所以我们建立的线段树大小为min(h,n),线段树的每一个节点包含一个变量c,记录当前区间内还剩下的可以put on的最大长度.插入一个数时 ...

  6. golang之archive/tar包的使用

    原文地址:http://www.niu12.com/article/36 github地址:https://github.com/ZQCard/go_api_practice // tar包实现了文件 ...

  7. idea设置断点,对于for循环,到指定次数时停止

    断点处右键 参考:https://www.w3cschool.cn/intellij_idea_doc/intellij_idea_doc-hn272f6k.html https://www.w3cs ...

  8. codeforces559A--Gerald&#39;s Hexagon(计算几何)

    A. Gerald's Hexagon time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  9. 智能选择器和语义化的CSS

    本文由白牙根据Heydon Pickering的<Semantic CSS With Intelligent Selectors>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之 ...

  10. Jsp中如何在<c:forEach>标签内获取集合的长度

    利用jstl标签functions的prefix属性的length属性值 1.首先在jsp页面导入jstl function标签 <%@ taglib prefix="fn" ...