function FullScreen(){
var el = $('html')[0];//要全屏的元素,如果要全页面全屏,建议使用html节点而不是body节点
var isFullscreen=document.fullScreen||document.mozFullScreen||document.webkitIsFullScreen;
if(!isFullscreen){//进入全屏,多重短路表达式
(el.requestFullscreen&&el.requestFullscreen())||
(el.mozRequestFullScreen&&el.mozRequestFullScreen())||
(el.webkitRequestFullscreen&&el.webkitRequestFullscreen())||(el.msRequestFullscreen&&el.msRequestFullscreen());
}else{ //退出全屏,三目运算符
document.exitFullscreen?document.exitFullscreen():
document.mozCancelFullScreen?document.mozCancelFullScreen():
document.webkitExitFullscreen?document.webkitExitFullscreen():'';
}
}

直接调用该方法即可。

使用esc键退出全屏。

此方法的全屏和F11的全屏还是有区别的。

html5 自带全屏API调用方法的更多相关文章

  1. HTML5 全屏 API

    翻译人员: 铁锚 原文日期: 2013年12月23日 翻译日期: 2013年12月29日 原文链接: Fullscreen API 在越来越真实的web应用程序中,JavaScript也变得越来越给力 ...

  2. 使用html5中video自定义播放器必备知识点总结以及JS全屏API介绍

    一.video的js知识点: controls(控制器).autoplay(自动播放).loop(循环)==video默认的: 自定义播放器中一些JS中提供的方法和属性的记录: 1.play()控制视 ...

  3. HTML5全屏API

    现在大多数浏览器都有全屏功能,允许用户来设置或操作.但HTML5的全屏API与之不同,HTML5的全屏API允许web开发工程师在程序中调用. 这样,web开发工程师就可以再网站中设计一个按钮,当该按 ...

  4. JavaScript网页全屏API

    在大多数的浏览器中都有实现网页全屏显示的功能,并且大部分浏览器实现全屏显示和退出全屏显示的快捷键通常是F11和Esc两个按键.如今,W3C已经制定了关于网页全屏显示的API,利用这个API 可以实现网 ...

  5. 全屏API

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2679 二.相关文章以 ...

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

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

  7. 全屏API接口

    HTML5的诞生给我们提供了很多精彩的JavaScript和HTML新功能和新特征.有些新特征我们已知多年并大量的使用,而另外一些主要是用在前沿的手机移动技术上,或者桌面应用中起辅助作用.不管这些HT ...

  8. WPF Popup全屏 弹出方法。解决只显示75%的问题。

    WPF Popup全屏 弹出方法.解决只显示75%的问题.   WPF 中 Popup 有一个特点.当Popup的高度超过屏幕的75%的时候,只显示75%的高度. 如下代码: <Window x ...

  9. HTML5轻松实现全屏视频背景

    想在你的网页首页中全屏播放一段视频吗?而这段视频是作为网页的背景,不影响网页内容的正常浏览.那么我告诉你有一款Javascript库正合你意,它就是Bideo.js. 参考网址: https://ww ...

随机推荐

  1. [转]ORM的优缺点

    ORM[Object-Relation-Mapping]对象关系映射. 这个名词已经出来好几年了.已经不陌生.  以前在项目中针对相对复杂业务逻辑时一般采用领域模型驱动方式进行业务概述,分析和建模. ...

  2. Java虚拟机规范----JVM体系结构

    一.Java平台的结构图 二.JVM与JRE.JDK关系? JVM:Java Virtual Machine(Java虚拟机),负责执行符合规范的Class文件 JRE:Java Runtime En ...

  3. 13.Github使用

    我们一直用GitHub作为免费的远程仓库,如果是个人的开源项目,放到GitHub上是完全没有问题的.其实GitHub还是一个开源协作社区,通过GitHub,既可以让别人参与你的开源项目,也可以参与别人 ...

  4. 如何在linux下安装jdk并运行java程序

    一.进入root 大家可以看到我这里用的是CentOS 6.5 系统 二.测试网络与YUM是否可用 1.测试网络 ping www.baidu.com,如下图就是通了 参考: 一.JDK安装1.lin ...

  5. centos单用户 救援 运行级别 yum,单用户模式,救援模式,inittab :启动级别 e2fsck wetty mingetty 物理终端 /dev/console 虚拟终端 /dev/tty(0,6) 模拟终端 /dev/pts/# grub-md5-crypt 给grub加密码 initrd 第二节课

    centos单用户 救援 运行级别  yum,单用户模式,救援模式,inittab :启动级别  e2fsck  wetty  mingetty  物理终端 /dev/console  虚拟终端 /d ...

  6. Openstack(十)部署nova服务(计算节点)

    在计算节点安装 10.1安装nova计算服务 # 阿里云源详见2.3配置 # yum install openstack-nova-compute 10.2配置nova计算服务 10.2.1配置nov ...

  7. mariadb10.1.13GTID实现主从复制

    ---恢复内容开始--- 环境:centos6.5       mariadb:10.1.13-MariaDB GTID:GTID是有服务器的UUID和事务序号组成的唯一事务序号 ---UUID:N ...

  8. Yahoo Programming Contest 2019

    A - Anti-Adjacency 签. #include <bits/stdc++.h> using namespace std; int main() { int n, k; whi ...

  9. Android ActionBar自定义

    关于自定义的ActionBar的实现过程,这里做下笔记以供之后查看. 1.默认状态 使用Android Studio新建一个名为“ActionBar”的应用,默认actionbar如图(1)所示. 图 ...

  10. springcloud9----feign-client-without-hystrix

    package com.itmuch.cloud; import org.springframework.boot.SpringApplication; import org.springframew ...