HTML5资讯

当前位置: HTML5技术网 > HTML5资讯 > 你不知道的5个HTML5 API

你不知道的5个HTML5 API

HTML5资讯  手机阅读

  一提到HTML5,你脑海里是不是闪现这样的画面:“一大堆脱衣舞女和独角兽走进房间,然后演奏着 I’m Sexy and I know it”。产生这样的想法难道是我们的错吗?API的停滞不前,使一些基本的特性,例如使用“占位符”都需要“花一分钟”。尽管HTML5的许多功能都已经在现代浏览器中实现,但开发者却很少关注那些轻量且非常实用的API。本文就将为您“曝光”5个你所不知道的API,并且希望你能探索出更多的HTML5 API,助你在这条路上走的更远。

 

  Element.classList

 

  classList API提供了一个CSS控制器,而这功能以前都是通过JavaScript实现的:

 

  1. // Add a class to an element  
  2. myElement.classList.add("newClass");  
  3.  
  4. // Remove a class to an element  
  5. myElement.classList.remove("existingClass");  
  6.  
  7. // Check for existence  
  8. myElement.classList.contains("oneClass");  
  9.  
  10. // Toggle a class  
  11. myElement.classList.toggle("anotherClass"); 

 

  该API最大的优点是:简单和智能,阅读这篇文章了解更多的classList属性。

 

  ContextMenu API

 

  ContextMenu API是一个非常出色的菜单API,无需重写浏览器上下文菜单即可把item添加到浏览器菜单中,非常简单、方便。

 

  1. <section contextmenu="mymenu"> 
  2.   <!--   
  3.     For the purpose of cleanliness,   
  4.     I'll put my menu inside the element that will use it   
  5.   --> 
  6.  
  7.   <!-- add the menu --> 
  8.   <menu type="context" id="mymenu"> 
  9.     <menuitem label="Refresh Post" onclick="window.location.reload();" icon="/images/refresh-icon.png"></menuitem> 
  10.     <menu label="Share on..." icon="/images/share_icon.gif"> 
  11.       <menuitem label="Twitter" icon="/images/twitter_icon.gif" onclick="goTo('//twitter.com/intent/tweet?text=' + document.title + ':  ' + window.location.href);"></menuitem> 
  12.       <menuitem label="Facebook" icon="/images/facebook_icon16x16.gif" onclick="goTo('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem> 
  13.     </menu> 
  14.   </menu> 
  15. </section> 

  

  备注:最好使用JavaScript创建菜单标记,因为item的动作还是由JavaScript执行,如果JavaScript被关闭那么留一个不能执行的菜单也没用。

 

  Element.dataset

 

  dataset这个API可以帮助开发人员轻松获取(get)或设置(set)数据属性值:

 

  1. /*  Assuming element:  
  2.  
  3.   <div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="This is the value"></div> 
  4.  
  5. */  
  6.  
  7. // Get the element  
  8. var element = document.getElementById("myDiv");  
  9.  
  10. // Get the id  
  11. var id = element.dataset.id;  
  12.  
  13. // Retrieves "data-my-custom-key"  
  14. var customKey = element.dataset.myCustomKey;  
  15.  
  16. // Sets the value to something else  
  17. element.dataset.myCustomKey = "Some other value";  
  18.  
  19.   // Element becomes:  
  20.   //    <div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="Some other value"></div>  

 

  无需多说,和classList一样,简单有效。

 

  window.postMessage API

 

  IE8很早就开始支持postMessage API,它允许消息在windows和iframe之间发送:

 

  1. // From window or frame on domain 1, send a message to the iframe which hosts another domain  
  2. var iframeWindow = document.getElementById("iframe").contentWindow;  
  3. iframeWindow.postMessage("Hello from the first window!");  
  4.  
  5. // From inside the iframe on different host, receive message  
  6. window.addEventListener("message", function(event) {  
  7.   // Make sure we trust the sending domain  
  8.   if(event.origin == "http://davidwalsh.name") {  
  9.     // Log out the message  
  10.     console.log(event.data);  
  11.  
  12.     // Send a message back  
  13.     event.source.postMessage("Hello back!");  
  14.   }  
  15. ]);  

 

  消息只能是字符串类型,使用JSON.stringify和JSON.parse可以解析更多有意义的数据。

 

  autofocus Attribute

 

  当页面完成时,autofocus(自动对焦)属性可以帮助一个给定的Button、Input或TextArea元素自动获取焦点。

 

  1. <input autofocus="autofocus" /> 
  2. <button autofocus="autofocus">Hi!</button> 
  3. <textarea autofocus="autofocus"></textarea> 

 

  每个浏览器会支持不同的API,所以在使用之前请认真阅读使用说明,希望能帮助你更好的使用API。(编译/张红月 英文来自:david walsh blog)

      本文转自:CSDN

 

【编辑推荐】

  1. 利用HTML5 History API实现无刷新跳转

  2. Cocos2d-html5发布2.0版本 使用统一API

  3. 用HTML5的Audio API做的弹钢琴网站

【你不知道的5个HTML5 API】相关文章

1. 你不知道的5个HTML5 API

2. 你不知道的JavaScript和CSS交互的方法

3. 你可能不知道的5种 CSS 和 JS 的交互方式

4. 八款你不得不知的开源前端JS框架

5. 你必须知道的28个HTML5特征、窍门和技术

6. 营销者需要知道的5件关于HTML5的事

7. 15个程序员需要知道的Chrome扩展

8. 验证HTML的5个原因和5个资源

9. 开发者必须知道的HTML5十五大新特性

10. 10件开发者和老板都要知道的HTML5的那些事

本文来源:https://www.51html5.com/a2881.html

点击展开全部
上一篇:W3C计划HTML5规格2014年完成,2016年公布HTML 5.1 下一篇:HTML5 将会带来一场 Web 革命

﹝你不知道的5个HTML5 API﹞相关内容

「你不知道的5个HTML5 API」相关专题

html5 api element
复制网址 收藏网址 分享到微信 分享到微博 分享到QQ

其它栏目

学习教程 HTML5开发工具 HTML5网站 HTML5游戏 HTML5资讯

也许您还喜欢