5个你不知道的HTML5的接口介绍

代码如下：

复制代码代码如下:

// 使用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;

};

ContextMenu API

经测试chrome28不管用。。。

新的API，ContextMenu 是极好的接口：此接口允许你很简单地添加菜单项到浏览器的上下文菜单(右键菜单)，而不是去覆盖浏览器的默认右键菜单。

需要注意的是，你最好采用js脚本来动态的创建菜单contextmenu，这样可以避免页面禁用JS脚本的情况下出现多余的HTML代码。

代码如下：

复制代码代码如下:

<div class="hide">





<section contextmenu="mymenu" style="min-height:100px;min-height:200px;background:#999;">

<h1>点击此区域查看菜单</h1>





<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>

Element.dataset

数据集(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 Attribute

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;

}

// 正则， \b 表示可见连续字符的边界，可以这么理解:

// "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;

};

// 函数，切换(元素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)" _fcksavedurl=""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">





<section contextmenu="mymenu" style="min-height:100px;min-height:200px;background:#999;">

<h1>点击此区域查看菜单</h1>

<!--

为了代码结构的清晰，把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>

上一篇：使用HTML5拍照示例代码
下一篇：html5模拟平抛运动(模拟小球平抛运动过程)