apihtml5,API#5

API和H5的区别。

API和H5的区别为：性质不同、目的不同、应用不同。

成都创新互联公司主营鼓楼网站建设的网络公司,主营网站建设方案,App定制开发,鼓楼h5小程序设计搭建,鼓楼网站营销推广欢迎鼓楼等地区企业咨询

一、性质不同

1、API：API是一些预先定义的函数，或指软件系统不同组成部分衔接的约定。

2、H5：H5是构建Web内容的一种语言描述方式,是Web中核心语言HTML的规范。

二、目的不同

1、API：API的目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问原码，或理解内部工作机制的细节。

2、H5：H5的目的是在浏览器中通过一些技术处理将其转换成为了可识别的信息。

三、应用不同

1、API：开放的API 甚至源代码主要体现在桌面应用上。

2、H5：H5主要应用于网站的网页浏览上。

html5定义中api是什么意思?

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

如何使用HTML5实现全屏API

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

【进入和退出全屏】

// 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以上都支持了。