5個你不知道的HTML5的介面
原文地址:5 HTML5 APIs You Didn’t Know Existed
原文日期: 2010年09月27日
翻譯日期: 2013年8月7日
當人們看到或者說出”HTML5″這個詞的時候,估計至少有一半以上的人,會聯想到她既是一個性感而又充滿魅力的美女,同時也是一隻能把你搞得焦頭爛額的獨角獸,這能怪我們這些開發者嗎?
我們注意到那些基礎的Api停滯發展瞭如此漫長的時間(大概是1999-2009),以至於像”placeholder”這樣基礎的一個附加功能,也要花費我們不短的時間來處理。
儘管當前的主流瀏覽器已經實現了很多的HTML5新特性,但是很多開發者根本就沒注意到這些更簡潔,也很有用的API。
本系列文章介紹這些介面API,同時也希望能鼓勵更多開發者去探索那些還不廣為人知的API。
這個屬性已經發布了好幾年,通過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; };
經測試chrome28不管用。。。
新的API,ContextMenu 是極好的介面: 此介面允許你很簡單地新增選單項到瀏覽器的上下文選單(右鍵選單),而不是去覆蓋瀏覽器的預設右鍵選單。
需要注意的是,你最好採用js指令碼來動態的建立選單contextmenu,這樣可以避免頁面禁用JS指令碼的情況 下出現多餘的HTML程式碼。
程式碼如下:
<div class="hide"> <!-- contextmenu 指定了使用哪個上下文選單。 --> <!-- !!!不知道為什麼,我的瀏覽器上這個配置不起作用。 --> <section contextmenu="mymenu" style="min-height:100px;min-height:200px;background:#999;"> <h1>點選此區域檢視選單</h1> <!-- 為了程式碼結構的清晰,把menu元素放到了要使用的元素內部,其實你也可以放到外部的任何地方: --> <!-- 新增選單,至於圖片圖示,請自己設定。add the menu --> <menu type="context" id="mymenu"> <menuitem label="重新整理頁面" onclick="window.location.reload();" icon="http://mat1.gtimg.com/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.href=`http://www.weibo.com`"></menuitem> <menuitem label="騰訊微博" icon="http://mat1.gtimg.com/app/opent/images/wiki/resource/weiboicon32.png" onclick="window.location.href=`http://t.qq.com`"></menuitem></menuitem> </menu> </menu> </section> </div>
資料集(dataset) API 允許開發者對DOM元素設定(set)和獲取(get) 以 data- 字首開頭的屬性值。
程式碼如下:
<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"); // 注意這個不是 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 屬性確保當頁面載入後,給定的 BUTTON,INPUT或者 TEXTAREA 元素能夠自動獲得焦點。
<input autofocus="autofocus" /> <button autofocus="autofocus">Hi!</button> <textarea autofocus="autofocus"></textarea>
autofocus 屬性主要用在簡單的輸入頁面,詳情請參考:autofocus 屬性
各瀏覽器廠商對這些API的支援度各不相同,所以在使用之前最好檢測一下相容性,花一些時間來閱讀上面所列出的API,您將會對他們瞭解和掌握更多。
部分的測試程式碼如下:
<!DOCTYPE html> <html> <head> <title>5個你不知道的 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 || "一個未知警告!"; 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; } // !!! 其實,本函式 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; }; // 使用className屬性(Dom元素,css類名) function toggleClassName(element,cName){ var className = element.className || ""; // 去掉首尾的空白 cName = cName.replace(/^s*|s*$/g,""); // cName 中間如果含有空白字元,則失敗. 如果要好好處理,可以拆分為陣列,單個處理 var blankReg = /s+/; if(blankReg.test(cName)){ warn("`"+cName+"`中間含有空白字元"); return false; } // 正則, 表示可見連續字元的邊界,可以這麼理解: // "hide2 hide hide myname" 那麼, // hide2 的前後各有一個虛擬的 ,hide 前後也有, // 但是 hi 和 de之間則沒有。 // g 表示單行全域性 //var rep = /hide/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; }; // 函式,切換(元素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屬性,將使用其他手段來實現"); 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載入後 執行 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)" id="close">關閉</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.gtimg.com/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>點選此區域檢視選單</h1> <!-- 為了程式碼結構的清晰,把menu元素放到了要使用的元素內部,其實你也可以放到外部的任何地方: --> <!-- 新增選單,至於圖片圖示,請自己設定。add the menu --> <menu type="context" id="mymenu"> <menuitem label="重新整理頁面" onclick="window.location.reload();" icon="http://mat1.gtimg.com/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.href=`http://www.weibo.com`"></menuitem> <menuitem label="騰訊微博" icon="http://mat1.gtimg.com/app/opent/images/wiki/resource/weiboicon32.png" onclick="window.location.href=`http://t.qq.com`"></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>
相關文章
- 你可能不知道的5 個強大的HTML5 APIHTMLAPI
- 39個讓你受益的HTML5教程HTML
- 好程式設計師前端教程-講給小白:你不知道的HTML5程式設計師前端HTML
- 你不知道的JavaScript中的5個JSON祕密功能JavaScriptJSON
- 讓你聽見的 HTML5HTML
- 你應該知道的10個奇特的 HTML5 單頁網站HTML網站
- 10個HTML5 實戰教程 提升你的綜合開發能力HTML
- 那些你不知道的含有免費次數的API介面API
- 【譯】10 個你不知道你需要的 HTML 元素HTML
- 你不知道的javascript,你不知道的奧祕JavaScript
- C#你可能不知道的陷阱, IEnumerable介面C#
- 為你帶來靈感的 20 個 HTML5/CSS3 模板HTMLCSSS3
- 20個你(可能)不知道的Git命令Git
- 9個最新最酷的HTML5動畫HTML動畫
- 39個你不知道的關於亞馬遜的真相亞馬遜
- 《深入HTML5》之你應該知道的5件事HTML
- 你不知道的體驗設計之介面音效設計
- 你所不知道的Android啟動頁(歡迎介面)Android
- Vue你可能不知道的7個技巧Vue
- 你從不知道的 11 個 KDE 應用
- 11個基礎的HTML5動畫工具HTML動畫
- 10個出色的HTML5畫布示例HTML
- 14個HTML5實現的效果合集HTML
- 你不知道的JavaScript--Item5 全域性變數JavaScript變數
- 讓你心動的 HTML5 & CSS3 效果HTMLCSSS3
- 7個華麗的基於Canvas的HTML5動畫CanvasHTML動畫
- 5個介面效能提升的通用技巧
- 你不知道的 WebSocketWeb
- 你不知道的CSSCSS
- 你不知道的JavaScriptJavaScript
- HTML5的CanvasHTMLCanvas
- 百度分享你不知道的6個秘密
- 10個你可能不知道的前端PS技巧前端
- 你可能不知道的7個CSS單位CSS
- 8 個你可能不知道的 Docker 知識Docker
- 11個你可能不知道的Python庫Python
- 記HTML5 <a> 標籤的一個小坑HTML
- 必須知道的28個HTML5特性、技巧HTML