开发者社区> 铁锚> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

5个你不知道的HTML5的接口

简介: 原文地址:5 HTML5 APIs You Didn’t Know Existed  原文日期: 2010年09月27日 翻译日期: 2013年8月7日 当人们看到或者说出"HTML5"这个词的时候,估计至少有一半以上的人,会联想到她既是一个性感而又充满魅力的美女,同时也是一只能把你搞得焦头烂额的独角兽,这能怪我们这些开发者吗? 我们注意到那些基础的Api停滞发展了如此漫长的时间(大概是1999-2009),以至于像"placeholder"这样基础的一个附加功能,也要花费我们不短的时间来处理。
+关注继续查看

原文地址: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">
		<!-- 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>

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


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
python+requests+excel+unittest+ddt接口自动化数据驱动并生成html报告(优化版)
python+requests+excel+unittest+ddt接口自动化数据驱动并生成html报告(优化版)
0 0
python接口自动化(三十一)--html测试报告通过邮件发出去——下(详解)
本篇总结了 QQ (SSL)邮箱和 163(非SSL) 邮箱发送邮件,专治各种不行,总之看完这篇以后麻麻再也不用担心我的邮件收不到了。以下代码兼容 python2 和 python3,运行无异常,放心大胆使用。
0 0
python接口自动化(三十)--html测试报告通过邮件发出去——中(详解)
上一篇,我们虽然已经将生成的最新的测试报告发出去了,但是MIMEText 只能发送正文,无法带附件,因此我还需要继续改造我们的代码,实现可以发送带有附件的邮件。发送带附件的需要导入另外一个模块 MIMEMultipart。还有就是测 试负责人不止一个人,需要将测试报告发给多个人,也就是多个收件人。这篇主要是围绕这两个主题进行讲解的。
0 0
python接口自动化(二十九)--html测试报告通过邮件发出去——上(详解)
前边几篇,已经教小伙伴们掌握了如何生成HTML的测试报告,那么生成测试报告,我们也不能放在那里不管了,这样即使你报告在漂亮,领导也看不到。因此如果想向领导汇报工作,不仅需要提供更直观的测试报告。而是我们需要将生 成测试报告发个相关的负责人,需要他们看一下测试结果,把控一下项目的接口有风险,会不会影响项目进度等等一些事吧。
0 0
python接口自动化(二十八)--html测试 报告——下(详解)
上一篇我们批量执行完用例后,已经生成的测试报告是生成 HTML 格式的。但是我们可以看出那个官方的测试报告既不美观也不大方,我们这里需要优化一下,优化的让人赏心悦目,就和看到一个美女一样看了一眼,忍不住回头再多看一眼 - _ - 并且把上一篇遇到的问题列举解决一下。
0 0
python接口自动化(二十七)--html 测试报告——上(详解)
上一篇我们批量执行完用例后,生成的测试报告是文本形式的,不够直观,而且报告一般都是发给leader的,所以最好是直观一目了然,为了更好的展示测试报告,最好是生成 HTML 格式的。unittest 里面是不能生成 html 格式报告的,需 要导入一个第三方的模块:HTMLTestRunner。
0 0
+关注
铁锚
Java与数据库开发
文章
问答
文章排行榜
最热
最新
相关电子书
更多
天猫 HTML5 互动技术实践
立即下载
天猫HTML5互动技术实践
立即下载
《零基础HTML入门教程》
立即下载