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

程序员文章站 2023-11-21 12:53:04

尽管当前的主流浏览器已经实现了很多的HTML5新特性，但是很多开发者根本就没注意到这些更简洁，也很有用的API，本系列文章介绍这些接口API，同时也希望能鼓励更多开发者去探索那些还... 13-08-07...

原文地址：5 html5 apis you didn’t know existed
原文日期： 2010年09月27日
翻译日期： 2013年8月7日
当人们看到或者说出"html5"这个词的时候，估计至少有一半以上的人，会联想到她既是一个性感而又充满魅力的美女，同时也是一只能把你搞得焦头烂额的独角兽，这能怪我们这些开发者吗？
我们注意到那些基础的api停滞发展了如此漫长的时间(大概是1999-2009)，以至于像"placeholder"这样基础的一个附加功能，也要花费我们不短的时间来处理。
尽管当前的主流浏览器已经实现了很多的html5新特性，但是很多开发者根本就没注意到这些更简洁，也很有用的api。
本系列文章介绍这些接口api，同时也希望能鼓励更多开发者去探索那些还不广为人知的api。
element.classlist
这个属性已经发布了好几年，通过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;
};

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- 前缀开头的属性值。
代码如下：

复制代码

代码如下:

复制代码

代码如下:

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 元素能够自动获得焦点。

复制代码

代码如下:

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

上一篇： Vue在页面数据渲染完成之后的调用方法

下一篇： html5 worker 实例(二) 图片变换效果

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

你不知道的5个HTML5新功能

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

怎么炖芸豆，给你介绍你不知道的厨房妙招

显卡知识扫盲：详细介绍你所不知道的显存颗粒知识

你不能不知道的美食小常识——吃面条的好处介绍

槐花好吃吗？给你介绍你所不知道的槐花营养价值！

杨桃的介绍，关于杨桃你不知道的事，赶快学起来

菊花的品种有哪些?来介绍一下你平时不知道的菊花知识

你不知道的5个HTML5 API

怎么炖芸豆，给你介绍你不知道的厨房妙招