如何使用HTML5实现全屏API

现在主流浏览器基本上实现了全屏效果，但是不同浏览器实现不一样：

成都创新互联是一家专业提供成县企业网站建设,专注与成都做网站、网站设计、外贸营销网站建设、HTML5、小程序制作等业务。10年已为成县众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。

【进入和退出全屏】

// Webkit (works in Safari5.1 and Chrome 15)

element.webkitRequestFullScreen();

document.webkitCancelFullScreen();

// Firefox 10+

element.mozRequestFullScreen();

document.mozCancelFullScreen();

// W3C 提议

element.requestFullscreen();

document.exitFullscreen();

//进入全屏

function requestFullScreen() {

var de = document.documentElement;

if (de.requestFullscreen) {

de.requestFullscreen();

} else if (de.mozRequestFullScreen) {

de.mozRequestFullScreen();

} else if (de.webkitRequestFullScreen) {

de.webkitRequestFullScreen();

}

}

//退出全屏

function exitFullscreen() {

var de = document;

if (de.exitFullscreen) {

de.exitFullscreen();

} else if (de.mozCancelFullScreen) {

de.mozCancelFullScreen();

} else if (de.webkitCancelFullScreen) {

de.webkitCancelFullScreen();

}

}

//调用

document.body.addEventListener('click',function(){

requestFullScreen();

//5秒钟自动退出全屏

setTimeout(function(){

exitFullscreen();

},5000);

},false);

检查全屏状态变化 Detecting fullscreen state change

document.addEventListener("fullscreenchange", function () {

fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";

}, false);

document.addEventListener("mozfullscreenchange", function () {

fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";

}, false);

document.addEventListener("webkitfullscreenchange", function () {

fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";

}, false);

css的全屏样式 Styling fullscreen

在css中，我们有几个伪类来给全屏设置样式，一般是 full-screen 这个伪类，然后会自动再全屏的时候生效

html:-moz-full-screen {

background: red;

}

html:-webkit-full-screen {

background: red;

}

html:fullscreen {

background: red;

}

全屏状态下的键盘输入 Full screen with key input

为了安全原因，很多情况下全屏输入都是被阻塞禁止的，但是chrome允许通过下面的API来允许键盘输入

docElm.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);

这个只在chrome支持，其他浏览器不支持。firefox计划使用requestFullscreenWithKeys 方法来支持鼠标输入，但是会触发用户通知已保证安全。

firefox10以上，chrome 15和safari5.1以上都支持了。

html5定义中api是什么意思?

api就是接口，html里面的api也不例外，也是些编程接口，是你访问一些编码指令和一些标准的一个接口一个集合，就跟插座一样，是电和电器的一个接口。比如html5里面的canvas，是绘图的一个api，html5获取地理位置的api，即时通信的api，文件读取api等等，通过这些api来访问标准里面的指令编码，来操纵相应的操作。

HTML5 中引入了哪些新的JavaScript API？具体有什么作用？

简而言之,HTML5就是由新的标记引进的新元素形式和为现有元素新增的某些属性，与新的JavaScript APIs的结合体。那HTML5中引入了新增加了哪些新标签与JavaScript API结合体呢？我这里例举了我们平时最常用的几种：

1、 Canvas API是一个具有完整功能的JavaScript API并伴随产生了新HTML5元素Canvas。通过Canvas API,您可以利用它和WebGL在浏览器中创建一个2 D或3 D绘图场景，

2、 Contacts API主要应用在移动设备上，为浏览器提供对用户通用通讯录的访问。它在浏览器内建立一个本地存储库，来存储联系人信息。而不是通过访问让你所有联系人信息直接保存在Google +、Facebook或其他网站上, Contacts API将允许您有本地存储库,网站可以通过本地存储库访问存储的联系人信息。现在的主流浏览器都支持Contacts API

3、 通过File API 浏览器可以直接访问用户计算机的沙箱区域将数据存储到文件系统。

4、 在HTML5中Forms API得到了发展，内置了验证功能，在接下来的课程中,您将会学习到如何通过使用内置的规则实现表单验证,以及如何添加自定义规则进行表单验证。

5、 允许浏览器请求用户的位置信息，一旦获权,浏览器可以通过许多不同的方法来确定计算机或设备的实际位置，它将会有一个比例尺来确认精确的地点位置。通过该API能获取经纬度等数据,非常适合应用程序定位。

6、 Media Capture的功能是将本地设备通过JavaScript将与浏览器相连。你将能够访问摄像头,摄像头,等等。

7、 Messaging API被用来与其他API一起使用，比如web web workers,这个我们将将在后面的课程中进一步讨论。

8、 选择(Selection)API的就像jQuery库一样运用非常广泛。在流行jQuery 、HTML5的今天,试图从文档对象模型选择元素是比较复杂的。jQuery弥补了这一差距。其实变得很容易，HTML5将高级选择功能直接内置在浏览器中。使得浏览器的选择性能得到很大的改善，甚至于JQuery选择工具一样速度。我并不是贬低jQuery。jQuery的优势就是DOM的选择,但是,jQuery不仅仅只提供了选择功能，事实上,在本课程中未来的演示的案例中,您将清楚的知道什么时候使用jQuery会更加便利,然后什么时候切换到本地选择会更加方便。.

9、 Server-Sent Events API：一个网页获取新的数据通常需要发送一个请求到服务器,也就是向服务器请求的页面.使用Server-Sent Events API,服务器可以在任何时刻向我们的web页面推送数据和信息.这些被推送进来的信息可以在这个页面上作为事件/数据来处理。服务器推送事件(Server-Sent Events)的优点在于： 只要响应的内容类型是事件/数据流，事件就通过HTTP发送，浏览器能够识别该传输。

10、 Web Notifications API即web消息提醒，它可以使页面可以发出通知，通知将被显示在页面之外的系统层面上（通常使用操作系统的标准通知机制，但是在不同的平台和浏览器上的表现会有差异）。这个功能使 web 应用可以向用户发送信息，即使应用处于空闲状态。最明显的用例之一是一个网页版电子邮件应用程序，每当用户收到了一封新的电子邮件都需要通知用户，即使用户正在使用另一个应用程序。在2013年夏天，这个API还是在被W3C在试用，并没有被很多浏览器所应用。

11、 Web Sockets API：Web Sockets是一种基于 ws 协议的技术，它使得建立全双工连接成为可能。websocket 常见于浏览器中，但是这个协议不受使用平台的限制。它允许你收发信息到服务器端。这个典型的示例就是即时通信。你建立一个对话，如果没有sockets，你可能会去从服务器中去获取新的消息。如果具有了sockets，当消息通过浏览器发到服务端的时候，对方的客户端通过已经建立好的sockets链接就能自动的接收到信息。

12、 Web存储，它有两种版本,本地存储和会话存储。就WEB开发来说,一个会话就是你通过浏览器与服务器之间的一次通话，所以,如果你熟悉服务器端web开发,会话存储可能不是头一次听说。基本上,只要用户页在页面上的统一个会话内，工作数据就不会丢失。如果浏览器关闭或者转向另一个会话，那么此时数据就不复存在。本地存储在不同会话之间仍然能保存数据, 本地存储与cookie 和IndexedDB相比，它可以让你来贮存更多的信息。Web存储与cookie,数据不发送到请求的服务器而是保存在客户端。

这些都是HTML5中新加入的一些比较常用的功能API，如果你想要系统的了解HTML5的新功能，推荐你去一个叫做秒秒学的教程网站上看看，里面有专门的课程来讲解HTML5中的新特性，希望对你有帮助。

什么是API?HTML5的API是什么?能通俗易懂点的?不要复制

应用程序接口，开发程序的时候我们需要调用api，为什么需要调用api呢？因为很多系统的操作我们自己写程序是完成不了的，这就需要调用人家写好的方法，这个方法就是人家提供的api。比如获取浏览器的版本，我们只要调用一个关于version方面的方法就可以得到版本信息，具体怎么得到的是人家在低层写好的。HTML5同样这个道理，什么getElementById();这些方法都成为api，如果人家不给你提供这个方法，你就没法得到一个dom元素。所以说查api文档，就是查那些人家写好的方法。

分享标题：html5api,html5api接口代码
文章路径：http://pwwzsj.com/article/dseepss.html