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