5个你不知道的HTML5的接口
原文地址：5 HTML5 APIs You Didn’t Know Existed
原文日期： 2010年09月27日
翻译日期： 2013年8月7日
当人们看到或者说出"HTML5"这个词的时候，估计至少有一半以上的人，会联想到她既是一个性感而又充满魅力的美女，同时也是一只能把你搞得焦头烂额的独角兽，这能怪我们这些开发者吗？
我们注意到那些基础的Api停滞发展了如此漫长的时间(大概是1999-2009)，以至于像"placeholder"这样基础的一个附加功能，也要花费我们不短的时间来处理。
尽管当前的主流浏览器已经实现了很多的HTML5新特性，但是很多开发者根本就没注意到这些更简洁，也很有用的API。
本系列文章介绍这些接口API，同时也希望能鼓励更多开发者去探索那些还不广为人知的API。
这个属性已经发布了好几年，通过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;
};
经测试chrome28不管用。。。
新的API，ContextMenu 是极好的接口： 此接口允许你很简单地添加菜单项到浏览器的上下文菜单(右键菜单)，而不是去覆盖浏览器的默认右键菜单。
需要注意的是，你最好采用js脚本来动态的创建菜单contextmenu，这样可以避免页面禁用JS脚本的情况 下出现多余的HTML代码。
代码如下：
<div class="hide"> <!-- contextmenu 指定了使用哪个上下文菜单。 --> <!-- !!!不知道为什么，我的浏览器上这个配置不起作用。 --> <section contextmenu="mymenu" style="min-height:100px;min-height:200px;background:#999;"> <h1>点击此区域查看菜单</h1> <!-- 为了代码结构的清晰，把menu元素放到了要使用的元素内部，其实你也可以放到外部的任何地方: --> <!-- 添加菜单,至于图片图标，请自己设置。add the 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>
数据集(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 属性确保当页面加载后，给定的 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)" 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">
<!-- contextmenu 指定了使用哪个上下文菜单。 -->
<!-- !!!不知道为什么，我的浏览器上这个配置不起作用。 -->
<section contextmenu="mymenu" style="min-height:100px;min-height:200px;background:#999;">
<h1>点击此区域查看菜单</h1>
<!--
为了代码结构的清晰，把menu元素放到了要使用的元素内部，其实你也可以放到外部的任何地方:
-->
<!-- 添加菜单,至于图片图标，请自己设置。add the 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>
5个你不知道的HTML5的接口的更多相关文章
- 另5个你不知道的HTML5接口API
原文地址: 5 More HTML5 APIs You Didn’t Know Existed 演示地址: 全屏API Demo 原文日期: 2012年11月08日 翻译日期: 2013年08月13日 ...
- HTML5 File接口(在web页面上使用文件)
File接口提供了与文件相关的信息,并且运行JavaScript在web页面上去访问文件中的内容. File对象来自于用户使用input标签选择文件返回的FileList对象,来自于拖放操作的Data ...
- H5 APP开发必读,20个你不知道的Html5新特征和窍门
Jeffrey Way曾发表过一篇博文<28 HTML5 Features, Tips, and Techniques you Must Know >讲述了28个HTML5特征.窍门和技术 ...
- HTML5 FileReader接口学习笔记
1.FileReader概述 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据. 其中F ...
- 利用html5 postMessage接口跨域设置iframe大小
<!doctype html> <html> <head> <title>Document A</title> <meta chars ...
- 使用localResizeIMG3+WebAPI实现手机端图片上传
前言 惯例~惯例~昨天发表的使用OWIN作为WebAPI的宿主..嗯..有很多人问..是不是缺少了什么 - - 好吧,如果你要把OWIN寄宿在其他的地方...代码如下: namespace Conso ...
- SOSO街景地图 API （Javascript）开发教程（1）- 街景
SOSO街景地图 Javascript API 干什么用的? 你想在网页里嵌入个地图,就需要它了! 另外,它还支持:地点搜索.周边/附近查询.地图标注.公交/驾车路线规划.地理坐标与地址相互转换.地理 ...
- H5实现拍照并上传
<!DOCTYPE HTML><html><head> <meta charset="UTF-8"> <meta ...
- web前端跨域方案
ajax跨域请求 qzfl实现 跨子域的xhr 原生xhr不支持跨域,通过iframe+proxy.html达到跨子域 假如A页面要请求B页面,A.B跨子域.A创建指向B的proxy页的ifram ...
随机推荐
- Golang学习笔记：goroutine
1.goroutine goroutine是go语言的并发体.在go语言里面能使用go关键字来实现并发. go func() 1.1 概念介绍 goroutine本质上是协程,我刚刚学习的时候就粗略地 ...
- 数组的遍历你都会用了，那Promise版本的呢
这里指的遍历方法包括:map.reduce.reduceRight.forEach.filter.some.every因为最近要进行了一些数据汇总,node版本已经是8.11.1了,所以直接写了个as ...
- 前端实现搜索历史和清空历史（angularjs+ionic）
要实现的页面效果: 1.显示历史搜索, 2.最近搜索的排在最前, 2.最多显示8条历史 4.清空历史记录 思路: 1.首先显示历史记录需要一个数组searchItems,通过ng-repeat显示每一 ...
- Java锁Synchronized对象锁和类锁区别
java的内置锁:每个java对象都可以用做一个实现同步的锁,这些锁成为内置锁.线程进入同步代码块或方法的时候会自动获得该锁,在退出同步代码块或方法时会释放该锁.获得内置锁的唯一途径就是进入这个锁的保 ...
- Linux(centos7)下安装Docker
近期公司开始推Docker技术.这个系列的文章都是基于CentOS7系统下进行讲解的. Docker简介 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器 ...
- Nginx 安装 配置 使用
Nginx 安装 配置 使用 基本的HTTP服务器特性 处理静态文件,索引文件以及自动索引:打开文件描述符缓存(缓存元数据和文件描述符,下一次可以直接从内存找到数据或者文件的位置): 使用缓存加速反向 ...
- 解决Popup StayOpen=true时，永远置顶的问题
Popup设置了StayOpen=true时,会置顶显示. 如弹出了Popup后,打开QQ窗口,Popup显示在QQ聊天界面之上. 怎么解决问题? 获取绑定UserControl所在的窗口,窗口层级变 ...
- JavaScript基础知识必知！！！
JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型. JS作用:表单验证,减轻服务端的压力:添加页面动画效果:动态更改页面内容:Ajax网络请求. 下面简单介 ...
- Python3 File 方法
Python3 File(文件) 方法 file 对象使用 open 函数来创建,下表列出了 file 对象常用的函数: 序号 方法及描述 1 file.close() 关闭文件.关闭后文件不能再进行 ...
- Java9相关资料(JShell简易教程等)
资源 Java9官网下载地址 Java9官方教程 JShell(Java Shell) 参考资料: JShell User Guide Java9先睹为快:JShell动手实践 以下大部分内容均来自该 ...