當(dāng)人們看到或者說(shuō)出"HTML5"這個(gè)詞的時(shí)候，估計(jì)至少有一半以上的人，會(huì)聯(lián)想到她既是一個(gè)性感而又充滿魅力的美女，同時(shí)也是一只能把你搞得焦頭爛額的獨(dú)角獸，這能怪我們這些開(kāi)發(fā)者嗎？
我們注意到那些基礎(chǔ)的Api停滯發(fā)展了如此漫長(zhǎng)的時(shí)間(大概是1999-2009)，以至于像"placeholder"這樣基礎(chǔ)的一個(gè)附加功能，也要花費(fèi)我們不短的時(shí)間來(lái)處理。
盡管當(dāng)前的主流瀏覽器已經(jīng)實(shí)現(xiàn)了很多的HTML5新特性，但是很多開(kāi)發(fā)者根本就沒(méi)注意到這些更簡(jiǎn)潔，也很有用的API。
本系列文章介紹這些接口API，同時(shí)也希望能鼓勵(lì)更多開(kāi)發(fā)者去探索那些還不廣為人知的API。
Element.classList
這個(gè)屬性已經(jīng)發(fā)布了好幾年，通過(guò)classList,我們可以通過(guò)JavaScript來(lái)操縱底層css的class屬性.
代碼如下:
// 使用classList屬性(Dom元素,css類(lèi)名)
function toggleClassList(element,cName){
// 1. classList API
// 切換類(lèi),有則移除，沒(méi)有則添加
if(element.classList.toggle){
element.classList.toggle(cName);
return true;
}
// !!! 其實(shí)，本函數(shù) toggleClassList 如果支持的話，
// 那么下面的代碼就不會(huì)被執(zhí)行，此處僅作演示,請(qǐng)靈活應(yīng)用
// 2. classList API
// element 的class屬性是否包含 hide 這個(gè)CSS類(lèi)
var hasHide = element.classList.contains(cName);
//
if(hasHide){
// 3. classList API
// 移除hide類(lèi)
element.classList.remove(cName);
} else {
// 4. classList API
// 添加hide類(lèi)
element.classList.add(cName);
}
return true;
};
ContextMenu API
經(jīng)測(cè)試chrome28不管用。。。
新的API，ContextMenu 是極好的接口： 此接口允許你很簡(jiǎn)單地添加菜單項(xiàng)到瀏覽器的上下文菜單(右鍵菜單)，而不是去覆蓋瀏覽器的默認(rèn)右鍵菜單。
需要注意的是，你最好采用js腳本來(lái)動(dòng)態(tài)的創(chuàng)建菜單contextmenu，這樣可以避免頁(yè)面禁用JS腳本的情況 下出現(xiàn)多余的HTML代碼。
代碼如下:
<div>
<!-- contextmenu 指定了使用哪個(gè)上下文菜單。 -->
<!-- !!!不知道為什么，我的瀏覽器上這個(gè)配置不起作用。 -->
<section contextmenu="mymenu">
<h1>點(diǎn)擊此區(qū)域查看菜單</h1>
<!--
為了代碼結(jié)構(gòu)的清晰，把menu元素放到了要使用的元素內(nèi)部，其實(shí)你也可以放到外部的任何地方:
-->
<!-- 添加菜單,至于圖片圖標(biāo)，請(qǐng)自己設(shè)置。add the menu -->
<menu type="context" id="mymenu">
<menuitem label="刷新頁(yè)面" onclick="window.location.reload();" icon="http://mat1.gtimg.com/app/opent/images/wiki/resource/weiboicon32.png"></menuitem>
<menu label="分享到..." icon="http://pic02.newdu.com/uploads/202504/02/32x323307.png">
<menuitem label="新浪微博" icon="http://pic02.newdu.com/uploads/202504/02/32x323307.png" onclick="window.location.></menuitem>
<menuitem label="騰訊微博" icon="http://mat1.gtimg.com/app/opent/images/wiki/resource/weiboicon32.png" onclick="window.location.></menuitem></menuitem>
</menu>
</menu>
</section>
</div>
Element.dataset
數(shù)據(jù)集(dataset) API 允許開(kāi)發(fā)者對(duì)DOM元素設(shè)置(set)和獲取(get) 以 data- 前綴開(kāi)頭的屬性值。
代碼如下:
<div id="intro" data-website="www.csdn.net" data-id="551996458" data-my-name="鐵錨" data-blog-url="http://blog.csdn.net/renfufei"></div>
代碼如下:
function testDataset(){
//
var intro = document.getElementById("intro");
// 注意這個(gè)不是 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);
};
沒(méi)有什么好說(shuō)的，和classList一樣，簡(jiǎn)單卻實(shí)用。(想一想，是否改變了后臺(tái)和前臺(tái)JS的某些交互以及解耦？)
window.postMessage API
IE8 已經(jīng)支持 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 類(lèi)型的數(shù)據(jù)，然而您可以使用 JSON.stringify 以及 JSON.parse 傳遞更多有意義的消息。
autofocus Attribute
autofocus 屬性確保當(dāng)頁(yè)面加載后，給定的 BUTTON,INPUT或者 TEXTAREA 元素能夠自動(dòng)獲得焦點(diǎn)。
代碼如下:
<input autofocus="autofocus" />
<button autofocus="autofocus">Hi!</button>
<textarea autofocus="autofocus"></textarea>
autofocus 屬性主要用在簡(jiǎn)單的輸入頁(yè)面，詳情請(qǐng)參考：autofocus 屬性
各瀏覽器廠商對(duì)這些API的支持度各不相同，所以在使用之前最好檢測(cè)一下兼容性，花一些時(shí)間來(lái)閱讀上面所列出的API，您將會(huì)對(duì)他們了解和掌握更多。
部分的測(cè)試代碼如下：
代碼如下:
<!DOCTYPE html>
<html>
<head>
<title>5個(gè)你不知道的 HTML5 API接口演示 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="renfufei@qq.com">
<meta name="Description" content="original=http://davidwalsh.name/html5-apis">
<style>
.hide{ display:none}
.poplayer{ z-index:999; position:absolute;background-color:#fff; top:0px;left:0px;overflow: hidden;width:100%;height:100%;opacity:1;}
.close{ top:3px; right:10px;position:absolute;}
</style>
<script>
// 顯示警告信息
function warn(msg){
warn = warn || "一個(gè)未知警告!";
if(window.console){
console.warn(msg);
} else {
alert(msg);
}
};
// 使用classList屬性(Dom元素,css類(lèi)名)
function toggleClassList(element,cName){
// 1. classList API
// 切換類(lèi),有則移除，沒(méi)有則添加
if(element.classList.toggle){
element.classList.toggle(cName);
return true;
}
// !!! 其實(shí)，本函數(shù) toggleClassList 如果支持的話，
// 那么下面的代碼就不會(huì)被執(zhí)行，此處僅作演示,請(qǐng)靈活應(yīng)用
// 2. classList API
// element 的class屬性是否包含 hide 這個(gè)CSS類(lèi)
var hasHide = element.classList.contains(cName);
//
if(hasHide){
// 3. classList API
// 移除hide類(lèi)
element.classList.remove(cName);
} else {
// 4. classList API
// 添加hide類(lèi)
element.classList.add(cName);
}
return true;
};
// 使用className屬性(Dom元素,css類(lèi)名)
function toggleClassName(element,cName){
var className = element.className || "";
// 去掉首尾的空白
cName = cName.replace(/^\s*|\s*$/g,"");
// cName 中間如果含有空白字符，則失敗. 如果要好好處理，可以拆分為數(shù)組，單個(gè)處理
var blankReg = /\s+/;
if(blankReg.test(cName)){
warn("'"+cName+"'中間含有空白字符");
return false;
}
// 正則， \b 表示可見(jiàn)連續(xù)字符的邊界，可以這么理解:
// "hide2 hide hide myname" 那么，
// hide2 的前后各有一個(gè)虛擬的\b ,hide 前后也有，
// 但是 hi 和 de之間則沒(méi)有。
// g 表示單行全局
//var rep = /\bhide\b/g;
var rep = new RegExp("\\b" + cName + "\\b", "g");
if(rep.test(className)){
className = className.replace(rep,"");
} else {
className += " "+cName;
}
// 替換新className。
element.className = className;
return true;
};
// 函數(shù)，切換(元素id，className)
function toggleClass(elementId,cName){
// 獲取一個(gè)DOM元素
var element = document.getElementById(elementId);
// 如果不存在元素
if(!element){
warn("id為"+elementId+"的元素不存在");
return false;
}
if(!element.classList){
warn("id為"+elementId+"的元素不支持classList屬性，將使用其他手段來(lái)實(shí)現(xiàn)");
return toggleClassName(element,cName);
} else {
return toggleClassList(element,cName);
}
};
function testDataset(){
//
var intro = document.getElementById("intro");
// 注意這個(gè)不是 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);
};
// dom加載后 執(zhí)行
window.addEventListener("DOMContentLoaded", function() {
var open = document.getElementById("open");
var close = document.getElementById("close");
open.addEventListener("click",function(){
//
toggleClass("diary2","hide");
toggleClass("loading","hide");
});
close.addEventListener("click",function(){
//
toggleClass("diary2","hide");
toggleClass("loading","hide");
});
//
testDataset();
}, false);
</script>
</head>
<body>
<div>
<div id="diary2">
<a href="javascript:void(0)" _fcksavedurl=""javascript:void(0)"" id="close">關(guān)閉</a>
<div id="loading">
<img src="http://mat1.gtimg.com/app/opent/images/wiki/resource/weiboicon32.png"
style="position:absolute; left:26px; top:10px;width: 50px;height: 50px;border-radius: 10px;-webkit-border-radius: 10px;">
<div>正在加載中</div>
</div>
</div>
<div>
<a href="javascript:void(0)" id="open">打開(kāi)</a>
</div>
</div>
<div>
<!-- contextmenu 指定了使用哪個(gè)上下文菜單。 -->
<!-- !!!不知道為什么，我的瀏覽器上這個(gè)配置不起作用。 -->
<section contextmenu="mymenu">
<h1>點(diǎn)擊此區(qū)域查看菜單</h1>
<!--
為了代碼結(jié)構(gòu)的清晰，把menu元素放到了要使用的元素內(nèi)部，其實(shí)你也可以放到外部的任何地方:
-->
<!-- 添加菜單,至于圖片圖標(biāo)，請(qǐng)自己設(shè)置。add the menu -->
<menu type="context" id="mymenu">
<menuitem label="刷新頁(yè)面" onclick="window.location.reload();" icon="http://mat1.gtimg.com/app/opent/images/wiki/resource/weiboicon32.png"></menuitem>
<menu label="分享到..." icon="http://pic02.newdu.com/uploads/202504/02/32x323307.png">
<menuitem label="新浪微博" icon="http://pic02.newdu.com/uploads/202504/02/32x323307.png" onclick="window.location.></menuitem>
<menuitem label="騰訊微博" icon="http://mat1.gtimg.com/app/opent/images/wiki/resource/weiboicon32.png" onclick="window.location.></menuitem></menuitem>
</menu>
</menu>
</section>
</div>
<div id="intro" data-website="www.csdn.net" data-id="551996458" data-my-name="鐵錨" data-blog-url="http://blog.csdn.net/renfufei"></div>
</body>
</html>