你可能不知道的&5&个强大的&HTML5&API
HTML5提供了一些非常强大的JavaScript和HTML
API，来帮助开发者构建精彩的桌面和移动应用程序。本文将介绍5个新型的API，希望对你的开发工作有所帮助。
该API允许开发者以编程方式将Web应用程序全屏运行，使Web应用程序更像本地应用程序。
Javascript代码 <img ALT="复制代码" src="http://simg.sinajs.cn/blog7style/images/common/sg_trans.gif" real_src ="http://www.iteye.com/images/icon_copy.gif"
TITLE="你可能不知道的&5&个强大的&HTML5&API" />
// 找到适合浏览器的全屏方法
function launchFullScreen(element)
if(element.requestFullScreen) {
element.requestFullScreen();
if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
if(element.webkitRequestFullScreen)
element.webkitRequestFullScreen();
// 启动全屏模式
launchFullScreen(document.documentElement);
// the whole page
launchFullScreen(document.getElementByIdx_x_x("videoElement"));
// any individual element
// 找到适合浏览器的全屏方法
function launchFullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
// 启动全屏模式
launchFullScreen(document.documentElement); // the whole page
launchFullScreen(document.getElementByIdx_x_x("videoElement")); // any individual element
FullScreen JavaScript API 具体使用
1、JavaScript API
FullScreen Javascript API 目前仍是草案，实现这个
API，更确切来说是具有这项功能的浏览器有：Chrome 15 / Firefox Nightly / Safari 5.1。对于
JS API 的前端调用，我们可以先看看下面的代码：
// Webkit (works in Safari5.1 and Chrome 15)
element.webkitRequestFullScreen();
document.webkitCancelFullScreen();
// Firefox 10
element.mozRequestFullScreen();
document.mozCancelFullScreen();
// W3C 提议
element.requestFullscreen();
document.exitFullscreen();
只有两个方法，在需要调用全屏的元素调用 requestFullscreen() 方法，在需要退出时对 document 调用
exitFullscreen() 这个 API。问题不大，只是命名上的不同。
只是，厂商前缀，各浏览器的实现和 W3C
不一致，代码又得写得跟屎一样。我特意把不同用颜色标注出来。绿色的是相同的点，红色的是不同的点。在这一点上倒觉得 W3C
有点奇怪。好不容易 Webkit 和 Mozilla 是一致的，何必改掉命名。既然发，为什么不把 request 发成 enter 与
exit 对应？！。无论如何，至少可以实现，目前 IE 仍没有决定要不要实现这个草案，Johndyer 这样说：“I have an
email from a IE team member saying they are discussing it, but have
not made any decisions. ” 。呃~
在这里吐槽也没什么用，我们返回正题。浏览器支持 fullscreenchange
事件。让你可以为全屏做更多事。官方草案没有多提，只是略过，这一段来自 Johndyer 的代码，使用的是 Mozilla
的提案，具体使用还需要具体对待：
// Webkit-base: element.onwebkitfullscreenchange
// Firefox: element.onmozfullscreenchange
// W3C Method:
element.addEventListener('fullscreenchange', function(e) {
if (document.fullScreen) {
2. CSS 选择器：:fullscreen /
:fullscreen-ancestor
这两个选择器的作用是这样的：
:fullscreen & 当前全屏化的元素
:fullscreen-ancestor & 所有全屏化元素的祖先元素
对于 :fullscreen 还是比较好理解的，但对于 fullscreen-ancestor
要选出它的全家，而不仅仅是父节点，似乎不能理解其他使用。其实，看一下官方草案提供的 Demo
代码，就知道了：可以隐藏或者什么的。但为什么不把全屏的内容设置为最高级别置顶的元素呢？这一点 W3C
的选择似乎也比较另令想吐槽。看官方 CSS Demo 代码吧：
:fullscreen {
position:fixed;
background:black;
width:100%;
height:100%;
:fullscreen-ancestor:root {
overflow:hidden;
:fullscreen-ancestor {
z-index:auto;
opacity:1;
mask:none;
clip:none;
filter:none;
transform:none;
3. HTML 标签属性: allowFullScreen
像 flash 使用的 &object& 和
&embed& 可以设置是否允许全屏，现在这个特性同样可以应用于
&iframe& 标签。只要添加 allowFullScreen
属性即可：
&!-- content from another site that is allowed to use the fullscreen command --&
&iframe width="640" height="360" src="http://anothersite.com/video/123" allowfullscreen=""&&/iframe&
三、解决方案
一般来说，全屏主要应用还是在视频和游戏。当然，也可以实现像 Mac Lion 一样的全屏显示，就像
Preview.app，全屏的时候使用起来是非常爽的。游戏和视频可以使用 flash 来兼容旧的浏览器和不支持 fullScreen
JavaScript API 的浏览器。像 Firefox Nightly( v10 会支持)，Chrome 15， Safari
5.1 可以使用 Johndyer 的 jQuery 插件：
目前遇到的问题可能是：
IE 对这个功能的实现没有安排
全屏在 Mac 下是浏览器全屏还是内置实现的全屏？Chrome 实现的是 Lion 内置的全屏，而 Safari
本身实现的是浏览器自身的全屏。
安全问题，全屏下伪造一个系统登陆框？
是否所有元素都应该被全屏内容盖住？
似乎第 1 点和第 3 点是我们比较关注的，也需要去关注的。反而对于 API 的调用是比较简单的，不需要那么多思考。
引用 DEMO:
五、引用文档
1. 参考事件的处理：
2. 大部分代码引用这篇文章：
3. 历史和讨论：
4. 标准与厂商对比：
该API可以用来检测页面对于用户的可见性，即返回用户当前浏览的页面或标签的状态变化。
Javascript代码
// 设置隐藏属性和可见改变事件的名称，属性需要加浏览器前缀
// since some browsers only offer vendor-prefixed
var hidden, state,
visibilityC
if (typeof
document.hidden !== "undefined")
hidden = "hidden";
visibilityChange =
"visibilitychange";
"visibilityState";
(typeof document.mozHidden
!== "undefined") {
"mozHidden";
visibilityChange =
"mozvisibilitychange";
"mozVisibilityState";
(typeof document.msHidden
!== "undefined") {
"msHidden";
visibilityChange =
"msvisibilitychange";
"msVisibilityState";
(typeof document.webkitHidden
!== "undefined") {
"webkitHidden";
visibilityChange =
"webkitvisibilitychange";
"webkitVisibilityState";
// 添加一个标题改变的监听器
document.addEventListener(visibilityChange,
function(e) {
// 开始或停止状态处理
}, false);
// 设置隐藏属性和可见改变事件的名称，属性需要加浏览器前缀
// since some browsers only offer vendor-prefixed support
var hidden, state, visibilityC
if (typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
state = "visibilityState";
} else if (typeof document.mozHidden !== "undefined") {
hidden = "mozHidden";
visibilityChange = "mozvisibilitychange";
state = "mozVisibilityState";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
state = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
state = "webkitVisibilityState";
// 添加一个标题改变的监听器
document.addEventListener(visibilityChange, function(e) {
// 开始或停止状态处理
}, false);
该API允许Web应用程序访问摄像头和麦克风，而无需使用插件。
Javascript代码
// 设置事件监听器
window.addEventListener("DOMContentLoaded",
function() {
// 获取元素
var canvas =
document.getElementByIdx_x_x("canvas"),
canvas.getContext("2d"),
document.getElementByIdx_x_x("video"),
videoObj = { "video":
errBack = function(error)
console.log("Video capture error:
", error.code);
// 设置video监听器
if(navigator.getUserMedia) { //
navigator.getUserMedia(videoObj,
function(stream) {
video.src =
video.play();
}, errBack);
if(navigator.webkitGetUserMedia) {
// WebKit-prefixed
navigator.webkitGetUserMedia(videoObj,
function(stream){
video.src =
window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}, false);
// 设置事件监听器
window.addEventListener("DOMContentLoaded", function() {
// 获取元素
var canvas = document.getElementByIdx_x_x("canvas"),
context = canvas.getContext("2d"),
video = document.getElementByIdx_x_x("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
// 设置video监听器
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src =
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}, false);
这是一个针对移动设备应用程序的API，主要用于检测设备电池信息。
Javascript代码
var battery = navigator.battery ||
navigator.webkitBattery || navigator.mozB
// 电池属性
console.warn("Battery charging:
", battery.charging); // true
console.warn("Battery level: ",
battery.level); // 0.58
console.warn("Battery discharging time:
", battery.dischargingTime);
// 添加事件监听器
battery.addEventListener("chargingchange",
function(e) {
console.warn("Battery charge change:
", battery.charging);
}, false);
var battery = navigator.battery || navigator.webkitBattery || navigator.mozB
// 电池属性
console.warn("Battery charging: ", battery.charging); // true
console.warn("Battery level: ", battery.level); // 0.58
console.warn("Battery discharging time: ", battery.dischargingTime);
// 添加事件监听器
battery.addEventListener("chargingchange", function(e) {
console.warn("Battery charge change: ", battery.charging);
}, false);
预加载网页内容，为浏览者提供一个平滑的浏览体验。
&&/span&link
rel="prefetch"
href="http://davidwalsh.name/css-enhancements-user-experience"
&&/span&link
rel="prefetch"
href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png"
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。1668人阅读
HTML5（3）
JavaScript（29）
在HTML5之前的，从网页上传文件一次只能上传一个文件，而且也无法对要上传的文件做更深一步的操作。
HTML5提供了一个系列关于文件操在的API，通过使用这些API，对于从Web页面访问本地文件系统的相关处理将会变的非常简单。
File和FileList对象
&input&的type属性为 file 的时候，那么它就可以访问本地文件系统了。在HTML5之前，一次只能选择一个文件。HTML5中，给&input&添加属性 multiple 则可以一次选择多个文件。
注意：multiple或multiple=’multiple’ 两种写法都可以。
action="#" enctype="multipart/form-data"&
type="file" multiple&
用户选择的每一个文件都是一个File对象，而如果选择了多个File，则FileList表示这些多个File对象的列表集合。
File对象提供了关于文件的一些信息并且允许Javascript去访问这些信息。
File注意提供了3个属性(包括从Blob中的继承的)
File.lastModified：表示的文件的最后修改时间。以毫秒为单位。
File.name：获取的是文件的文件名。由于安全考虑，这个地方的文件名不包含路径。
File.size：获取到文件大小。以字节为单位。
注意：上面的属性都是readonly的。
FileList是多个File的列表集合:
FileList.item(index)：获取列表中的File
具体使用参考下面的代码：
action="#" enctype="multipart/form-data"&
type="file" multiple&
&获取文件相关信息&
id="content"&&
type="text/javascript"&
var btn = document.getElementsByTagName("button")[0];
var inputFile = document.getElementsByTagName("input")[0];
btn.onclick = function () {
var files = inputFile.
for(var i = 0; i & files. i++){
var msg = `第${i + 1}个文件的文件名:${files.item(i).name}, 最后修改时间:${files.item(i).lastModified},文件长度：${files.item(i).size}`;
content.innerHTML += msg + "&br&";
表示二进制原始文件。前面见到的File对象也继承了Blob对象。
注意包括两个属性：size和type。
size：表示Blob对象的字节长度。
File文件的size就是继承这里的size
type：表示Blob的MIME类型。如果未知则返回一个长度为 0 的字符串。FIle对象也继承了这个属性。
仍然以File对象来演示Blob对象:
for(var i = 0; i & files. i++){
var file = files.item(i);
var msg = `第${i + 1}个文件的MIME类型：${file.type}&br&`;
content.innerHTML += msg
FileReader
FileReader对象运行Web 应用程序以异步的方式读取文件的内容，使用File对象或Blob对象指定要读取的文件。
FileReader对象主要包括3个属性和5个方法、6个事件。
FileReader.error: 读取文件的时候发生的错误信息
FileReader.readyState:0-2数字，表示FileReader的状态
No data has been loaded yet.还没有加载到数据
Data is currently being loaded.这正在加载数据
The entire read request has been completed.数据加载完成
- FileReader.result:这个是最重要的属性。读取到的内容都存储在了这个属性中。只能在readyState DONE之后才能读取这个属性值。读取到的数据类型取决于用什么的方法去读取的文件。
FileReader.abort()：终止读取文件的操作。这个方法一点结束，则readyState就成为了DONE
FileReader.readAsArrayBuffer()：开始读取文件的内容，一旦完成，则把文件的数据存储在ArrayBuffer中。当然ArrayBuffer自然会存储在FileReader的result属性中。
FileReader.readAsBinaryString()：以二进制的形式读取文件的内容。这个方法是非标准方法，不要使用。
FileReader.readAsDataURL()：将文件读取为DateUrl
FileReader.readAsText()：将文件的内容读取文本。读取纯文本内容的时候使用。
FileReader.onabort：数据读取被中断时触发。
A handler for the
event. This event is triggered each time the reading operation is aborted.
FileReader.onerror：数据读取发生错误时触发。
A handler for the
event. This event is triggered each time the reading operation encounter an error.
FileReader.onload：数据读取成功后触发。
A handler for the
event. This event is triggered each time the reading operation is successfully completed.
FileReader.onloadstart：数据开始读取时触发。
A handler for the
event. This event is triggered each time the reading is starting.
FileReader.onloadend：数据读取完成后触发。不管数据读取成功还是失败都会触发。
A handler for the
event. This event is triggered each time the reading operation is completed (either in success or failure).
FileReader.onprogress：数据读取过程中触发。
A handler for the
event. This event is triggered while reading a
type="file" multiple id="file"&
& id="readBtn"&读取文件内容&
id="content"&此处显示读取到的文件内容&
type="text/javascript"&
var fileInput = document.getElementById("file");
var readBtn = document.getElementById("readBtn");
var content = document.getElementById("content");
readBtn.onclick = function () {
if(!FileReader) {
content.innerHTML = "你的文件不支持FileApi";
var files = fileInput.
for(var i = 0; i & files. i++){
var file = files.item(i);
if(file.type.startsWith("text")){
var reader = new FileReader();
reader.onload = function (event) {
content.innerHTML += "&hr&" + reader.
reader.readAsText(file, "utf-8");
在HTML5中，提供了直接支持拖放操作的API。新的拖放API已经支持浏览器与其他应用程序之间的互相拖动。相比以前的使用mousedown、mouseover、mouseup实现的拖放，新的API大大简化了拖放的代码。
实现拖放的步骤
把要拖放的对象的元素的draggable属性设为true(draggable=”true”)。另外对&img&和&a&元素(指定href属性)默认允许拖放。
编写与拖放有关的事件处理代码。
共有8个与拖放有关的事件！
产生事件的元素
被拖动的元素或文本
This event is fired when the user starts dragging an element or text selection。当开始拖动选择的元素或文本的时候出发
被拖动的元素或文本
This event is fired when an element or text selection is being dragged。在元素在拖动的过程中触发。(会重复触发)
拖放的目标元素
This event is fired when a dragged element or text selection enters a valid drop target。元素进入目标元素区域的时候触发。
拖放的目标元素
This event is fired when an element or text selection is being dragged over a valid drop target (every few hundred milliseconds).在目标元素领域经过的时候触发
拖放的目标元素
This event is fired when a dragged element or text selection leaves a valid drop target.当离开目标元素的时候触发。
拖放的目标元素
This event is fired when a drag operation is being ended (by releasing a mouse button or hitting the escape key).当拖放操作完成后触发(松开了鼠标键或者按下了esc键)
被拖动的元素
This event is fired when an element is no longer the drag operation’s immediate selection target.当元素不再是拖动操作的直接目标时触发
被拖动的元素
This event is fired when an element or text selection is dropped on a valid drop target。当在有效的目标上放下拖动的元素后触发
&!DOCTYPE html&
charset="utf-8"&
#draggable {
width: 200px;
height: 20px;
text-align: center;
background: white;
margin: 0 auto;
.dropzone {
box-sizing: border-box;
width: 400px;
height: 60px;
background: blueviolet;
margin: 10px auto;
padding: 20px;
class="dropzone"&
id="draggable" draggable="true" &
来拖动我啊
class="dropzone"&&
class="dropzone"&&
class="dropzone"&&
document.addEventListener("dragstart", function (event) {
dragged = event.
event.target.style.opacity = .3;
}, false);
document.addEventListener("drag", function (event) {
}, false);
document.addEventListener("dragenter", function (event) {
if (event.target.className == "dropzone") {
event.target.style.background = "purple";
}, false);
document.addEventListener("dragover", function (event) {
event.preventDefault();
}, false);
document.addEventListener("dragend", function (event) {
console.log("拖放结束");
event.target.style.opacity = "1";
}, false);
document.addEventListener("dragleave", function (event) {
console.log("离开目标元素");
if (event.target.className == "dropzone") {
event.target.style.background = "";
}, false);
document.addEventListener("drop", function (event) {
console.log("drog.....");
event.preventDefault();
if (event.target.className == "dropzone") {
event.target.style.background = "";
dragged.parentNode.removeChild(dragged);
event.target.appendChild(dragged);
}, false);
访问：96494次
积分：1699
排名：千里之外
原创：67篇
评论：26条
(1)(3)(3)(3)(4)(1)(4)(1)(5)(3)(1)(13)(10)(5)(2)(1)(4)(3)(1)HTML5新增了哪些内容或API，使用过哪些_百度知道
HTML5新增了哪些内容或API，使用过哪些
我有更好的答案
time、email、url、(3)本地离线存储 localStorage 长期存储数据，calendar、date、footer、header，浏览器关闭后数据不丢失;(7)新的技术webworker, websocket、section、(4)sessionStorage 的数据在浏览器关闭后自动删除;(5)语意化更好的内容元素，比如(2)用于媒介回放的 video 和 audio 元素(1)绘画(6)表单控件
采纳率：56%
来自团队：
He who does not advance loses ground.
为您推荐：
其他类似问题
您可能关注的内容
&#xe675;换一换
回答问题，赢新手礼包&#xe6b9;
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。> html5新增的api
热门文章热门标签
09月04日 |
09月04日 |
09月04日 |
09月05日 |
09月05日 |
09月05日 |
09月05日 |
09月05日 |1. getElementsByClassName()方法
getElementsByClassName()方法接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的所有元素的NodeList。传入多个类名时，类名的先后顺序不重要。
//取得所有类中包含"username"和"current"的元素，类名的先后顺序无所谓
var allCurrentUsernames = document.getElementsByClassName("username current");
//取得ID 为"myDiv"的元素中带有类名"selected"的所有元素
var selected = document.getElementById("myDiv").getElementsByClassName("selected");
2. classList 属性
add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
contains(value)：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。
remove(value)：从列表中删除给定的字符串。
toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。
//删除"disabled"类
div.classList.remove("disabled");
//添加"current"类
div.classList.add("current");
//切换"user"类
div.classList.toggle("user");
//确定元素中是否包含既定的类名
if (div.classList.contains("bd") && !div.classList.contains("disabled")) {
//执行操作
//迭代类名
for (var i = 0, len = div.classList. i & i++) {
doSomething(div.classList[i]);
3、自定义数据属性
HTML5 规定可以为元素添加非标准的属性，但要添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以data-开头即可。来看一个例子。
&div id="myDiv" data-appId="12345" data-myname="Nicholas"&&/div&
//本例中使用的方法仅用于演示
var div = document.getElementById("myDiv");
//取得自定义属性的值
var appId = div.dataset.appId;
var myName = div.dataset.
div.dataset.appId = 23456;
div.dataset.myname = "Michael";
//有没有"myname"值呢？
if (div.dataset.myname) {
alert("Hello, " + div.dataset.myname);
4、outerHTML 属性
outerHTML 属性和innerHTML 有点类似；
在读模式下，outerHTML 返回调用它的元素及所有子节点的HTML 标签。在写模式下，outerHTML会根据指定的HTML 字符串创建新的DOM 子树，然后用这个DOM子树完全替换调用元素。下面是一个例子。
&div id="content"&
&p&This is a &strong&paragraph&/strong& with a list following it.&/p&
&li&Item 1&/li&
&li&Item 2&/li&
&li&Item 3&/li&
var oBox = document.getElementById('content');
// 读模式下，返回的和innerHTML类似，只不过包括了div本身；
console.log(oBox.innerHTML);
使用outerHTML 属性以下面这种方式设置值：
oBox.outerHTML = "&p&This is a paragraph.&/p&";
这行代码完成的操作与下面这些DOM 脚本代码一样：
var p = document.createElement("p");
p.appendChild(document.createTextNode("This is a paragraph."));
oBox.parentNode.replaceChild(p, oBox);
结果，就是新创建的&p&元素会取代DOM 树中的&div&元素。
5、insertAdjacentHTML()方法
插入标记的最后一个新增方式是insertAdjacentHTML()方法。它接收两个参数：插入位置和要插入的HTML 文本。第一个参数必须是下列值之一：
"beforebegin"，在当前元素之前插入一个紧邻的同辈元素；
"afterbegin"，在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素；
"beforeend"，在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素；
"afterend"，在当前元素之后插入一个紧邻的同辈元素。
注意，这些值都必须是小写形式。第二个参数是一个HTML 字符串（与innerHTML 和outerHTML的值相同），如果浏览器无法解析该字符串，就会抛出错误。以下是这个方法的基本用法示例。
//作为前一个同辈元素插入
element.insertAdjacentHTML("beforebegin", "&p&Hello world!&/p&");
//作为第一个子元素插入
element.insertAdjacentHTML("afterbegin", "&p&Hello world!&/p&");
//作为最后一个子元素插入
element.insertAdjacentHTML("beforeend", "&p&Hello world!&/p&");
//作为后一个同辈元素插入
element.insertAdjacentHTML("afterend", "&p&Hello world!&/p&");
阅读(...) 评论()}