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. c# 网站 vislual studio

    一.新建 1.新建网站 在 菜单栏-->新建-->项目-->选项编辑语言-->web-->先前版本-> 2.新建母板: *.master文件是母板页文件.添加新项时 ...

  2. rac数据库单连接报错ora-12537解决办法

    1.现象如下: C:\Users\Administrator.DBA-PC>sqlplus sys/oracle@192.168.100.33:1521/orcl as sys dba SQL* ...

  3. Go Configure Support hot reloading.

    Go Configure – Josh Betz https://josh.blog/2017/04/go-configure Go Configure APRIL 27, 2017 # DEVELO ...

  4. ReactiveCocoa 初学者使用

    skip 跳过几个信号,不接受 filter :过滤 ignore:忽略某一个值 take:从开始一共取N次的信号 ignoreValues 这个比较极端,忽略所有值,只关心Signal结束,也就是只 ...

  5. 给所有开发者的React Native详细入门指南

    建议先下载好资料后,再阅读本文.demo代码和资料下载 目录 一.前言 二.回答一些问题 1.为什么写此教程 2.本文适合哪些人看 3.如何使用本教程 4.需要先学习JavaScript.HTML.C ...

  6. zcash 的资料

    我的比特币使用的是 electrum 2.9.3 版本.我的zcash用的是 jaxx 1.2 版. zcash又叫zec,可以在 bithumb (韩国的) 平台上进行交易zcash. zcash ...

  7. django开发项目的部署nginx

    Django 部署(Nginx) 本文主要讲解 nginx + uwsgi socket 的方式来部署 Django,比 Apache mod_wsgi 要复杂一些,但这是目前主流的方法. 1. 运行 ...

  8. Java基础知识Set、List、Map的区别

    就学习经验,浅谈Java中的Set,List,Map的区别,对JAVA的集合的理解是相对于数组: 数组是大小固定的,并且同一个数组只能存放类型一样的数据(基本类型/引用类型),JAVA集合可以存储和操 ...

  9. 1.1 Getting Started-Core Concepts

    一.Templates      使用Handlebars模板语言来描述程序的用户接口.每一个模板都有model的支持,如果model改变template就会自动更新. Expressions: li ...

  10. mysql索引之哈希索引

    哈希算法 哈希算法时间复杂度为O(1),且不只存在于索引中,每个数据库应用中都存在该数据结构. 哈希表 哈希表也为散列表,又直接寻址改进而来.在哈希的方式下,一个元素k处于h(k)中,即利用哈希函数h ...