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. jquery 实现点击按钮后出现倒计时效果(用于实现发送手机验证码、邮箱验证码)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. JSON_EXTRACT查询mysql中的{}和 [{},{}中的值]

    json_extract(a.tag, '$[*].tag_name.cn') as tag, json_extract(a.address,'$.en') as address_name, json ...

  3. C# WinForm实现任务栏程序图标闪烁

    相信大家在用QQ的时候都会知道,你打开了QQ聊天窗口,如果窗口不是当前激活的窗口的话,收到QQ消息时,任务栏(不是托盘图标)上的图标会闪一下变成黄色(Win7默认主题下),用以通知用户有消息进来了,之 ...

  4. Python开发【笔记】: __get__和__getattr__和__getattribute__区别

    引言: 1.object.__getattr__(self, name) 当一般位置找不到attribute的时候,会调用getattr,返回一个值或AttributeError异常. 2.objec ...

  5. Shape of passed values is (3490, 21), indices imply (3469, 21)

    背景 处理DataFrame数据时,抛了这个错误:Shape of passed values is (3490, 21), indices imply (3469, 21) 解决 数据出现重复,导致 ...

  6. 阿里云centos7.2 安装mysql 6.5

    [root@111 ~]# uname -aLinux bxhs 3.10.0-327.22.2.el7.x86_64 #1 SMP Thu Jun 23 17:05:11 UTC 2016 x86_ ...

  7. mysql 数据操作 单表查询 group by 注意

    GROUP BY 单独使用GROUP BY关键字分组 SELECT post FROM employee GROUP BY post; 注意:我们按照post字段分组,那么select查询的字段只能是 ...

  8. (转)在GitHub多个帐号上添加SSH公钥

    GitHub后台可以添加多个SSH Keys,但是同一个SSH Keys只能在添加在一个帐号上(添加时提示“Key is already in use”).理由很容易想到,SSH公钥使用时相当于用户名 ...

  9. 爬取51job职位信息之编码问题

    兴趣来潮,爬了下51job,但是遇到编码问题!以下是简单的一段代码 获取整个页面数据 # -*- coding:utf-8 -*- import requests import sysreload(s ...

  10. 关于c语言struct和typedef

    C++中使用: struct test{    int x, y;};就可以定义一个名为 test的结构体,但C中很可能编译通不过.C语言并不支持在struct后使用标示符定义结构体的名字,test将 ...