当你在人群中谈论到 "html5", 你也许会感觉到, 自己像一位异域舞者或独角兽, 来到屋子中间, 带有明显的 "我很酷, 我知道它" 的意味. 这不能说我们虚荣, 多少年来, 基本的 HTML API 一直没有任何发展, 以至于当有一个小的新功能出现时, 例如 placeholder, 都会让我们露出新奇的眼神. 尽管新式的浏览器中实现了很多 HTML5 特征, 但大部分程序员仍对一些小的, 非常有用的 API 不了解或从未听说. 本文中我将介绍一些这样的 API, 并欢迎大家发掘出更多不为人知的 HTML5 API!
Element.classList
classList API 提供了我们多年来一种使用 JavaScript 工具库来实现的控制 CSS 的基本功能:
- // 增加一个 CSS 类
- myElement.classList.add("newClass");
- // 删除一个 CSS 类
- myElement.classList.remove("existingClass");
- // 检查是否拥有一个 CSS 类
- myElement.classList.contains("oneClass");
- // 反转一个 CSS 类的有无
- myElement.classList.toggle("anotherClass");
这个新出现的 API 的主要价值体现就是: 简单实用. 读一下这篇文章, 里面介绍了其它几个 classList 功能特征.
ContextMenu API
这个新的 ContextMenu API 非常的有用: 它并不会替换原有的右键菜单, 而是将你的自定义右键菜单添加到浏览器的右键菜单里:
- <section contextmenu="mymenu">
- <!-- 添加菜单 -->
- <menu type="context" id="mymenu">
- <menuitem label="Refresh Post" onclick="window.location.reload();" icon="/images/refresh-icon.png"></menuitem>
- <menu label="Share on..." icon="/images/share_icon.gif">
- <menuitem label="Twitter" icon="/images/twitter_icon.gif" onclick="goTo('//twitter.com/intent/tweet?text='+ document.title +': '+ window.location.href);"></menuitem>
- <menuitem label="Facebook" icon="/images/facebook_icon16x16.gif" onclick="goTo('//facebook.com/sharer/sharer.php?u='+ window.location.href);"></menuitem>
- </menu>
- </menu>
- </section>
需要注意的是, 最好使用 JavaScript 动态的创建这些菜单代码, 因为菜单事件最终要调用 JavaScript 执行任务, 如果用户禁止了 JavaScript, 右键菜单也不会生成, 他同时也不会看到菜单.
Element.dataset
使用 dataset API, 程序员可以方便的获取或设置 data-* 自定义属性:
- /* 以下面的代码为例
- <div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="This is the value"></div>
- */
- // 获取元素
- var element = document.getElementById("myDiv");
- // 获取 id
- var id = element.dataset.id;
- // 读取 "data-my-custom-key" 的值
- var customKey = element.dataset.myCustomKey;
- // 修改成其它值
- element.dataset.myCustomKey = "Some other value";
- // 结果是:
- // <div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="Some other value"></div>
无需多说, 跟 classList 一样, 简单实用
Windows.postMessage API
即使是 IE8 也对 postMessage API 支持多年了, postMessage API 的功能是可以让你在两个浏览器窗口或 iframe 之间传递信息数据:
- // 从 A 域上的窗口或 iframe, 发送一条信息到 B 域中的窗口或 ifame
- var iframeWindow = document.getElementById("iframe").contentWindow;
- iframeWindow.postMessage("来自第一个窗口的问候!");
- // 在第二个不同域上的窗口或 iframe 接收消息
- Windows.addEventListener("message", function(event) {
- // 检验域的合法性
- if(event.origin == "http://www.webhek.com") {
- // 输出日志信息
- console.log(event.data);
- // 反馈消息
- event.source.postMessage("你也好吗!");
- }
- ]);
消息体只能是字符串, 但你可以用 JSON.stringify 和 JSON.parse 将消息转换成更有意义的数据体!
autofocus 属性
autofocus 属性能够让 BUTTON, INPUT, 或 TEXTAREA 元素在页面加载完成时自动成为页面焦点:
- <input autofocus="autofocus" />
- <button autofocus="autofocus">
- Hi!
- </button>
- <textarea autofocus="autofocus">
- </textarea>
在像谷歌搜索页面那样的有固定模式的地方, autofocus 属性是最理想的一个功能.
浏览器对各个 API 的支持稍有不同, 所以, 在使用前先检查一下对这些特征的支持情况. 再花点时间阅读一下各个 API 的详细说明, 相信你会有更多的发现.
来源: http://www.webhek.com/post/html5-apis.html