5個你不知道的HTML5的接口介紹
來源:易賢網(wǎng) 閱讀:1298 次 日期:2016-07-13 13:37:45
溫馨提示:易賢網(wǎng)小編為您整理了“5個你不知道的HTML5的接口介紹”,方便廣大網(wǎng)友查閱!

當人們看到或者說出"HTML5"這個詞的時候,估計至少有一半以上的人,會聯(lián)想到她既是一個性感而又充滿魅力的美女,同時也是一只能把你搞得焦頭爛額的獨角獸,這能怪我們這些開發(fā)者嗎?

我們注意到那些基礎(chǔ)的Api停滯發(fā)展了如此漫長的時間(大概是1999-2009),以至于像"placeholder"這樣基礎(chǔ)的一個附加功能,也要花費我們不短的時間來處理。

盡管當前的主流瀏覽器已經(jīng)實現(xiàn)了很多的HTML5新特性,但是很多開發(fā)者根本就沒注意到這些更簡潔,也很有用的API。

本系列文章介紹這些接口API,同時也希望能鼓勵更多開發(fā)者去探索那些還不廣為人知的API。

Element.classList

這個屬性已經(jīng)發(fā)布了好幾年,通過classList,我們可以通過JavaScript來操縱底層css的class屬性.

代碼如下:

// 使用classList屬性(Dom元素,css類名)

function toggleClassList(element,cName){

// 1. classList API

// 切換類,有則移除,沒有則添加

if(element.classList.toggle){

element.classList.toggle(cName);

return true;

}

// !!! 其實,本函數(shù) toggleClassList 如果支持的話,

// 那么下面的代碼就不會被執(zhí)行,此處僅作演示,請靈活應(yīng)用

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

經(jīng)測試chrome28不管用。。。

新的API,ContextMenu 是極好的接口: 此接口允許你很簡單地添加菜單項到瀏覽器的上下文菜單(右鍵菜單),而不是去覆蓋瀏覽器的默認右鍵菜單。

需要注意的是,你最好采用js腳本來動態(tài)的創(chuàng)建菜單contextmenu,這樣可以避免頁面禁用JS腳本的情況 下出現(xiàn)多余的HTML代碼。

代碼如下:

<div class="hide">

<!-- contextmenu 指定了使用哪個上下文菜單。 -->

<!-- !!!不知道為什么,我的瀏覽器上這個配置不起作用。 -->

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

<h1>點擊此區(qū)域查看菜單</h1>

<!--

為了代碼結(jié)構(gòu)的清晰,把menu元素放到了要使用的元素內(nèi)部,其實你也可以放到外部的任何地方:

-->

<!-- 添加菜單,至于圖片圖標,請自己設(shè)置。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.></menuitem>

<menuitem label="騰訊微博" icon="http://mat1.gtimg.com/app/opent/images/wiki/resource/weiboicon32.png" onclick="window.location.></menuitem></menuitem>

</menu>

</menu>

</section>

</div>

Element.dataset

數(shù)據(jù)集(dataset) API 允許開發(fā)者對DOM元素設(shè)置(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 已經(jīng)支持 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 類型的數(shù)據(jù),然而您可以使用 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;

}

// !!! 其實,本函數(shù) toggleClassList 如果支持的話,

// 那么下面的代碼就不會被執(zhí)行,此處僅作演示,請靈活應(yīng)用

// 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 中間如果含有空白字符,則失敗. 如果要好好處理,可以拆分為數(shù)組,單個處理

var blankReg = /\s+/;

if(blankReg.test(cName)){

warn("'"+cName+"'中間含有空白字符");

return false;

}

// 正則, \b 表示可見連續(xù)字符的邊界,可以這么理解:

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

};

// 函數(shù),切換(元素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屬性,將使用其他手段來實現(xiàn)");

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加載后 執(zhí)行

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">關(guān)閉</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>點擊此區(qū)域查看菜單</h1>

<!--

為了代碼結(jié)構(gòu)的清晰,把menu元素放到了要使用的元素內(nèi)部,其實你也可以放到外部的任何地方:

-->

<!-- 添加菜單,至于圖片圖標,請自己設(shè)置。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.></menuitem>

<menuitem label="騰訊微博" icon="http://mat1.gtimg.com/app/opent/images/wiki/resource/weiboicon32.png" onclick="window.location.></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>

更多信息請查看網(wǎng)頁制作
易賢網(wǎng)手機網(wǎng)站地址:5個你不知道的HTML5的接口介紹
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇剩?/div>

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 加入群交流 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號:hfpxwx
咨詢QQ:526150442(9:00—18:00)版權(quán)所有:易賢網(wǎng)