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. Android反编译调试源码

    Android反编译调试源码 1. 反编译得到源码 直接在windows 命令行下输入命令java -jar apktool_2.0.0.jar d -d 小米运动_1.4.641_1058.apk ...

  2. 【Linux】CentOS7上安装搜狗输入法

    找到一篇资料,提供安装搜狗输入法的方法,在http://www.cnblogs.com/Yiutto/p/6204085.html[也是本文的参考原地址] 请大家自行下载fcitx.tar.gz 1. ...

  3. DELLR720服务器更换硬盘,启动系统报错:there are offline or missing virtual drivers with preserved cache

    linux系统启动过程中给出错误: There are offline or missing virtual drives with preserved cache. Please check the ...

  4. wp8使用mvvm模式简单例子(二)---登陆功能,事件触发

    首先,还是需要一个Model类来为UI层的元素提供数据源 public class LoginModel:DependencyObject { public string Uid { get { re ...

  5. java 中文转Unicode 以及 Unicode转中文

    package com.sun; public class Snippet {    public static void main(String[] args) {        String cn ...

  6. #淘宝#复制分享宝贝内容,打开淘宝APP,自己主动弹出宝贝提示信息

    场景描写叙述: 淘宝复制连接,分享出去,比方拷贝到QQ好友.微信好友,一个宝贝信息.然后你朋友长按复制你分享它了的这个宝贝.当然打开手机淘宝时.自己主动会跳出宝贝的信息,点击确定能够直接进入宝贝详情 ...

  7. Python类定义和类继承详解

    类实例化后,可以使用其属性,实际上,创建一个实例之后,可以通过类名访问其属性,如果直接使用类名修改其属性,那么直接影响已经实例化的对象. 类的私有属性: __private_attrs 两个下划线开头 ...

  8. 使用 react-native-tab-navigator 创建 TabBar 组件

    1.首先安装好ReactNative的运行环境,安装组件依赖库 使用npm install react-native-tab-navigator --save安装所依赖的第三方库 2.导入 impor ...

  9. react-native 常见问题 及 解决方案

    一.报错 Warning:Navigator:isMounted is deprecated. Instead, make sure to clean up subscriptions and pen ...

  10. 【Linux】Linux删除指定文件夹下面 名称不包含指定字符的文件

    例如:现在文件夹home下面有以下数据文件列表 A_20171215.DAT B_20160630.DAT C_20170823.DAT 现在想删除不包含"20160630"这个字 ...