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. JQuery插件开发格式

    原地址 一.jQuery扩展 1.$.extend(object) 类似于.Net的扩展方法,用于扩展jQuery.然后就可以用$.的方式调用. $(function(){ $.extend({ fu ...

  2. iOS教程:如何使用Core Data – 预加载和引入数据

    这是接着上一次<iOS教程:Core Data数据持久性存储基础教程>的后续教程,程序也会使用上一次制作完成的. 再上一个教程中,我们只做了一个数据模型,之后我们使用这个数据模型中的数据创 ...

  3. 【Linux】linux下查看目录所在分区

    命令如下: df -h 目录名 具体使用例子如下:查看/home/sxd/文档处于哪个分区 ------------------------------------------------------ ...

  4. 遍历Enumeration

    版权声明:http://blog.csdn.net/qq924862077/ Enumeration(枚举)接口的作用和Iterator类似,只提供了遍历Vector和HashTable类型集合元素的 ...

  5. 转: Linux 上的常用文件传输方式介绍与比较

    from:  https://www.ibm.com/developerworks/cn/linux/l-cn-filetransfer/ ftp ftp 命令使用文件传输协议(File Transf ...

  6. [Tools] Support VS Code Navigation and Autocomplete Based on Webpack Aliases with jsconfig.json

    It's common to setup Webpack aliases to make imports much more convenient, but then you lose the abi ...

  7. Import CSV into DB using SSIS

    Step 1: create a table CREATE TABLE [EmployeeImported]( ,) NOT NULL, [ContactID] [int] NOT NULL, [Ma ...

  8. 【VAB】获取库文件地址

    如何获取Excle库文件地址呢?具体代码如下: Public Sub 获取Excel库文件夹的路径() MsgBox "库文件夹的路径是: " & Application. ...

  9. rabbitmq 用户和授权

    官方文档 https://my.oschina.net/hncscwc/blog/262246?p=

  10. iOS语言本地化,中文显示

    尽管一直相信xcode肯定提供有语言本地化的设置地方,可是一直也没凑着去改.非常多的汉化,还是使用代码去控制:比方navagition的return使用代码改动为"返回"! 近期在 ...