5个你不知道的HTML5的接口介绍_html5教程技巧

原文地址：5 HTML5 APIs You Didn’t Know Existed
原文日期： 2010年09月27日
翻译日期： 2013年8月7日
当人们看到或者说出"HTML5"这个词的时候，估计至少有一半以上的人，会联想到她既是一个性感而又充满魅力的美女，同时也是一只能把你搞得焦头烂额的独角兽，这能怪我们这些开发者吗？
我们注意到那些基础的Api停滞发展了如此漫长的时间(大概是1999-2009)，以至于像"placeholder"这样基础的一个附加功能，也要花费我们不短的时间来处理。
尽管当前的主流浏览器已经实现了很多的HTML5新特性，但是很多开发者根本就没注意到这些更简洁，也很有用的API。
本系列文章介绍这些接口API，同时也希望能鼓励更多开发者去探索那些还不广为人知的API。
Element.classList
这个属性已经发布了好几年，通过classList,我们可以通过JavaScript来操纵底层css的class属性.
代码如下：

复制代码

代码如下:

// 使用classList属性(Dom元素,css类名)
function toggleClassList(element,cName){
// 1. classList API
// 切换类,有则移除，没有则添加
if(element.classList.toggle){
element.classList.toggle(cName);
return true;
}
// !!! 其实，本函数 toggleClassList 如果支持的话，
// 那么下面的代码就不会被执行，此处仅作演示,请灵活应用
// 2. classList API
// element 的class属性是否包含 hide 这个CSS类
var hasHide = element.classList.contains(cName);
//
if(hasHide){
// 3. classList API
// 移除hide类
element.classList.remove(cName);
} else {
// 4. classList API
// 添加hide类
element.classList.add(cName);
}
return true;
};

ContextMenu API
经测试chrome28不管用。。。
新的API，ContextMenu 是极好的接口： 此接口允许你很简单地添加菜单项到浏览器的上下文菜单(右键菜单)，而不是去覆盖浏览器的默认右键菜单。
需要注意的是，你最好采用js脚本来动态的创建菜单contextmenu，这样可以避免页面禁用JS脚本的情况 下出现多余的HTML代码。
代码如下：

复制代码

代码如下:

点击此区域查看菜单

Element.dataset
数据集(dataset) API 允许开发者对DOM元素设置(set)和获取(get) 以 data- 前缀开头的属性值。
代码如下：

复制代码

代码如下:

复制代码

代码如下:

function testDataset(){
//
var intro = document.getElementById("intro");
// 注意这个不是 id属性哦，是 data-id 的值
var id = intro.dataset.id;
// data-website
var website = intro.dataset.website;
// data-blog-url,驼峰命名法..
var blogUrl = intro.dataset.blogUrl;
// data-my-name
var myName = intro.dataset.myName;
//
var msg = "qq:" id
",website:" website
",blogUrl:" blogUrl
",myName:" myName
;
//
warn(msg);
};

没有什么好说的，和classList一样，简单却实用。(想一想，是否改变了后台和前台JS的某些交互以及解耦？)
window.postMessage API
IE8 已经支持 postMessage API 好几年了，此API允许window 和iframe 元素之间互相传递消息。
跨域支持哦。 代码如下：

复制代码

代码如下:

// From window or frame on domain 1, send a message to the iframe which hosts another domain
var iframeWindow = document.getElementById("iframe").contentWindow;
iframeWindow.postMessage("Hello from the first window!");
// From inside the iframe on different host, receive message
window.addEventListener("message", function(event) {
// Make sure we trust the sending domain
if(event.origin == "http://davidwalsh.name") {
// Log out the message
console.log(event.data);
// Send a message back
event.source.postMessage("Hello back!");
}
]);
// message 只允许string 类型的数据，然而您可以使用 JSON.stringify 以及 JSON.parse 传递更多有意义的消息。

autofocus Attribute
autofocus 属性确保当页面加载后，给定的 BUTTON,INPUT或者 TEXTAREA 元素能够自动获得焦点。

复制代码

代码如下:

Hi!

autofocus 属性主要用在简单的输入页面，详情请参考：autofocus 属性
各浏览器厂商对这些API的支持度各不相同，所以在使用之前最好检测一下兼容性，花一些时间来阅读上面所列出的API，您将会对他们了解和掌握更多。
部分的测试代码如下：

复制代码

代码如下:

<script> <br>// 显示警告信息 <br>function warn(msg){ <br>warn = warn || "一个未知警告!"; <br>if(window.console){ <br>console.warn(msg); <br>} else { <br>alert(msg); <br>} <br>}; <br>// 使用classList属性(Dom元素,css类名) <br>function toggleClassList(element,cName){ <br>// 1. classList API <br>// 切换类,有则移除，没有则添加 <br>if(element.classList.toggle){ <br>element.classList.toggle(cName); <br>return true; <br>} <br>// !!! 其实，本函数 toggleClassList 如果支持的话， <br>// 那么下面的代码就不会被执行，此处仅作演示,请灵活应用 <br>// 2. classList API <br>// element 的class属性是否包含 hide 这个CSS类 <br>var hasHide = element.classList.contains(cName); <br>// <br>if(hasHide){ <br>// 3. classList API <br>// 移除hide类 <br>element.classList.remove(cName); <br>} else { <br>// 4. classList API <br>// 添加hide类 <br>element.classList.add(cName); <br>} <br>return true; <br>}; <br>// 使用className属性(Dom元素,css类名) <br>function toggleClassName(element,cName){ <br>var className = element.className || ""; <br>// 去掉首尾的空白 <br>cName = cName.replace(/^s*|s*$/g,""); <br>// cName 中间如果含有空白字符，则失败. 如果要好好处理，可以拆分为数组，单个处理 <br>var blankReg = /s /; <br>if(blankReg.test(cName)){ <br>warn("'" cName "'中间含有空白字符"); <br>return false; <br>} <br>// 正则， b 表示可见连续字符的边界，可以这么理解: <br>// "hide2 hide hide myname" 那么， <br>// hide2 的前后各有一个虚拟的b ,hide 前后也有， <br>// 但是 hi 和 de之间则没有。 <br>// g 表示单行全局 <br>//var rep = /bhideb/g; <br>var rep = new RegExp("\b" cName "\b", "g"); <br>if(rep.test(className)){ <br>className = className.replace(rep,""); <br>} else { <br>className = " " cName; <br>} <br>// 替换新className。 <br>element.className = className; <br>return true; <br>}; <br>// 函数，切换(元素id，className) <br>function toggleClass(elementId,cName){ <br>// 获取一个DOM元素 <br>var element = document.getElementById(elementId); <br>// 如果不存在元素 <br>if(!element){ <br>warn("id为" elementId "的元素不存在"); <br>return false; <br>} <br>if(!element.classList){ <br>warn("id为" elementId "的元素不支持classList属性，将使用其他手段来实现"); <br>return toggleClassName(element,cName); <br>} else { <br>return toggleClassList(element,cName); <br>} <br>}; <br>function testDataset(){ <br>// <br>var intro = document.getElementById("intro"); <br>// 注意这个不是 id属性哦，是 data-id 的值 <br>var id = intro.dataset.id; <br>// data-website <br>var website = intro.dataset.website; <br>// data-blog-url,驼峰命名法.. <br>var blogUrl = intro.dataset.blogUrl; <br>// data-my-name <br>var myName = intro.dataset.myName; <br>// <br>var msg = "qq:" id <br> ",website:" website <br> ",blogUrl:" blogUrl <br> ",myName:" myName <br>; <br>// <br>warn(msg); <br>}; <br>// dom加载后 执行 <br>window.addEventListener("DOMContentLoaded", function() { <br>var open = document.getElementById("open"); <br>var close = document.getElementById("close"); <br>open.addEventListener("click",function(){ <br>// <br>toggleClass("diary2","hide"); <br>toggleClass("loading","hide"); <br>}); <br>close.addEventListener("click",function(){ <br>// <br>toggleClass("diary2","hide"); <br>toggleClass("loading","hide"); <br>}); <br>// <br>testDataset(); <br>}, false); <br></script>

关闭

style="position:absolute; left:26px; top:10px;width: 50px;height: 50px;border-radius: 10px;-webkit-border-radius: 10px;">

正在加载中

打开

点击此区域查看菜单