mirror of
https://github.com/wahyd4/wahyd4.github.com.git
synced 2026-08-10 05:47:00 +10:00
Hermes Bot
232ecd7c22
- 308 posts reverse-extracted from wahyd4.github.com (Hexo 6.3.0 + NexT 8.25) - Hexo project with NexT theme, reading-experience custom styles - publish-post.sh: write post -> hexo build -> PR (master untouched)
90 lines
2.7 KiB
Markdown
90 lines
2.7 KiB
Markdown
---
|
||
title: "HTML5 全屏(full screen)API"
|
||
date: 2012-07-22 00:00:00
|
||
tags: [javascript, html5]
|
||
---
|
||
|
||
full screen (全屏)API,现在已经成为了HTML5的一个官方API，不过目前只是被chrome、firefox、safari浏览器实现了，且他们目前都是用的自行实现的函数，而非W3C官方标准的函数。建议在调用之前都检测一下！
|
||
|
||
full screen API主要有两个方法：一是执行全屏，另外一个则是退出全屏。他们的调用方法为：
|
||
|
||
**执行全屏**
|
||
|
||
```jscript
|
||
var element = XXX //这里你需要得到你的一个网页中的对象，可以是整个网页，或者其中一个节点
|
||
|
||
element.requestFullscreen(); //W3C的方法
|
||
|
||
element.mozRequestFullScreen(); //firefox实现的方法
|
||
|
||
element.webkitRequestFullScreen(); //chrome 和safari实现的方法
|
||
```
|
||
|
||
**退出全屏**
|
||
|
||
```jscript
|
||
element.exitFullScreen(); //W3C
|
||
|
||
element.mozCancelFullScreen(); //firefox
|
||
|
||
element.webkitCancelFullScreen(); //chrome和safari
|
||
```
|
||
|
||
例如,我想全屏整个页面,那个就应该使用:
|
||
|
||
```jscript
|
||
var documentEle = document.documentElement;
|
||
|
||
documentEle.webkitRequestFullScreen(); //chrome
|
||
```
|
||
|
||
此外我们还可以监听，full screen 事件，在其状态改变时执行相关操作。
|
||
|
||
```jscript
|
||
document.addEventListener("fullscreenchange", function () {}, false); //w3c
|
||
|
||
document.addEventListener("mozfullscreenchange",function(){},false); //firefox
|
||
|
||
document.addEventListener("webkitfullscreenchange", function () {}, false); //chrome 和safari
|
||
```
|
||
|
||
如果我们想获取当前某个对象数否处于全屏状态，就可以使用下面这个属性：
|
||
|
||
```jscript
|
||
document.fullScreen //w3c
|
||
|
||
document.mozFullScreen //firefox
|
||
|
||
document.webkitIsFullScreen // chrome 和safari
|
||
```
|
||
|
||
经过我的测试（chrome 22），应该是HTML 里面所有对象都是可以被全屏的,如：,<img>,<p>,网页本身。不过我们是不能一开始网页就让其处于全屏状态。而需要一些行为来触发这个事件。</p>
|
||
<p>在css 里面也有一个对应的选择器来修饰full screen：</p>
|
||
|
||
```css
|
||
html:fullscreen{
|
||
|
||
font-size:30px;
|
||
color:white;
|
||
background:blue;
|
||
|
||
}
|
||
|
||
html:-moz-full-screen{
|
||
font-size:30px;
|
||
color:white;
|
||
background:blue;
|
||
}
|
||
html:-webkit-full-screen{
|
||
font-size:30px;
|
||
color:white;
|
||
background:blue;
|
||
}
|
||
```
|
||
|
||
<p>目前IE9 也是不支持full screen 全屏 API的，不知道在IE 10里面支持不！微软在这方面做得真的不怎么样啊。</p>
|
||
<blockquote>
|
||
<p><a href="http://toozhao.com/playground/fullscreen.html" title="full screen demo">点我查看我做的demo吧！</a>包含全屏网页，和全屏图片，不过由于图片原因效果不好。但是功能有了。哈哈！</p>
|
||
</blockquote>
|
||
</div>
|