欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

5个你不知道的HTML5的接口先容

发布时间:2016-11-24  编辑:杨雨个人博客网站   点击:   

原文地点: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)" _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">
<!-- 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>
本文地址:http://itbyc.com/web/html5/13076.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1