5个你可能不知道的HTML5接口

2012-10-21 • WEB事儿 • by Nornor Chen

尽管HTML5的很多新特性都已经被许多浏览器厂商支持,但是许多开发者对HTML5中的一些小而有用的接口并不了解。这篇文章将会介绍五个你可能不知道的HTML5 API,同时也旨在激发大家对HTML5 API探索的热情。

1.Element.classList

classList API为JS提供了基本的CSS控制方法,几个基本的方法如下。

// 元素新增新的class名
myElement.classList.add("newClass");

// 删除元素已有的某个class名
myElement.classList.remove("existingClass");

// 判断元素是否包含某个class名
myElement.classList.contains("oneClass");

// toggle方法
myElement.classList.toggle('myCssClass'); //没有则新增
myElement.classList.toggle('myCssClass'); //若存在则删除

关于更多的classList api可以到这篇文章了解。

2.ContextMenu API

ContextMenu API(自定义右键菜单接口)并不是重写浏览器的右键菜单,而是允许你为浏览器原有的菜单上新增一些新的内容。定义的方法如下:

<section contextmenu="mymenu">
<!-- 新增菜单 -->
<menu type="context" id="mymenu">
    <menuitem label="刷新本文" onclick="reload();" icon="xx.png"></menuitem>
    <menuitem label="马上评论" onclick="comment()" icon="xx.png"></menuitem>
</menu>
</section>

对应效果:

ContextMenu接口定义效果

关于更多的ContextMenu api可以到这篇文章了解。

3.Element.dataset

dataset接口让开发者更方便地得到元素的属性值。

假如现在存在如下那样的div,里面自定义了属性

<div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="This is the value"></div>

在HTML5中可以使用dataset接口进行操作:

//获取元素
var element = document.getElementById("myDiv");

//获取元素data-id的值
var id = element.dataset.id;

//获取元素自定义的长属性值data-my-custom-key,使用驼峰法
var customKey = element.dataset.myCustomKey;

//设置属性值
customKey = "This is the New Value";

关于更多的dataset api可以到这篇文章了解。

4.window.postMessage API

postMessage让windows和IFRAME元素之间进行通信。PS:这个接口其实已经被IE8支持了很多年了。

假如AA.COM页面IFRAME了一个BB.COM的页面。那么他们之间跨域的消息传递可以通过以下方法:

// AA.com的页面对象,给页面里面IFRAME的BB.COM页面传消息
var iframeWindow = document.getElementById("iframe").contentWindow;
iframeWindow.postMessage("Hello from the first window!");

// IFRAME里的BB.COM接受到消息
window.addEventListener("message", function(event) {
  // 先确保来源网站是安全的
  if(event.origin == "http://AA.COM") {
    // 输出来自AA.COM的消息
    console.log(event.data);

    // 回复消息到AA.COM
    event.source.postMessage("Hello back!");
  }
]);

消息格式只能使用字符串哦。

关于更多的window.postMessage API可以到这篇文章了解。

5.自动聚焦属性(autofocus)

autofocus属性让BUTTON,INPUT,TEXTAREA找到了第二春,因为它们设置了这个属性,在页面加载时就能自动聚焦。

针对google,baidu和一些注册页面,autofocus是个好东西。

<input autofocus="autofocus" />
<button autofocus="autofocus">Hi!</button>
<textarea autofocus="autofocus"></textarea>

关于更多的autofocus API可以到这篇文章了解。

小结

浏览器之间支持这些API各有差异,所以建议在使用他们之前,做好相关的检测。本文每个段落最后都有一个该接口的详细文章,花点时间去了解一下,能让你更好地了解这些接口噢。

文章整理自:《5 HTML5 APIs You Didn’t Know Existed》,如果觉得翻译得不好,麻烦看看原文,吼吼~

« CSS自定义Chrome滚动条

HTML5 A标签新属性:download »