建站
咨詢
售后
建站咨詢
新聞中心
什么是HTML5（三）：性能&集成，設(shè)備訪問
性能集成
十余年的濱海網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營(yíng)銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整濱海建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“濱海網(wǎng)站設(shè)計(jì)”,“濱海網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
web workers
Web Worker 是HTML5標(biāo)準(zhǔn)的一部分，這一規(guī)范定義了一套 API，它允許一段JavaScript程序運(yùn)行在主線程之外的另外一個(gè)線程中。
一般情況下，當(dāng)在 HTML 頁(yè)面中執(zhí)行腳本時(shí)，頁(yè)面的狀態(tài)是不可響應(yīng)的，直到腳本已完成。?
web worker 是運(yùn)行在后臺(tái)的 JavaScript，獨(dú)立于其他腳本，不會(huì)影響頁(yè)面的性能。您可以繼續(xù)做任何愿意做的事情：點(diǎn)擊、選取內(nèi)容等等，而此時(shí) web worker 在后臺(tái)運(yùn)行。
History API
window 對(duì)象通過history對(duì)象提供對(duì)瀏覽器歷史記錄的訪問能力。它暴露了一些非常有用的方法和屬性，讓你在歷史記錄中自由前進(jìn)和后退，而在HTML5中，更可以操縱歷史記錄中的數(shù)據(jù)。
概覽
可以通過back()，forward()和go()方法在用戶的歷史記錄中前進(jìn)與后退。
要在歷史記錄中前進(jìn)和后退，只需要這樣做：
window.history.back(); //后退window.history.forword(); //前進(jìn)12
而利用go（）方法，通過指定一個(gè)相對(duì)于當(dāng)前頁(yè)面位置的數(shù)值，可以從當(dāng)前會(huì)話的歷史記錄中加載頁(yè)面（當(dāng)前頁(yè)面索引值為0，上一頁(yè)為-1，下一頁(yè)為1）
window.history.go(-1); //后退一頁(yè)，相當(dāng)于back（）window.history.go(1); ?//向前移動(dòng)一頁(yè)（相當(dāng)于調(diào)用forward()）12
你可以查看length屬性值，了解歷史記錄棧中一共有多少頁(yè)：
var numberOfEntries = window.history.length;1
添加和修改歷史記錄條目
HTML5引進(jìn)了history.pushState()方法和history.replaceState()方法，它們?cè)试S你逐條地添加和修改歷史記錄條目。這些方法可以協(xié)同window.onpopstate事件一起工作。
例子：?
假設(shè)?hfoo.html?將執(zhí)行如下JavaScript代碼：
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");12
這將讓瀏覽器的地址欄顯示tml，但不會(huì)加載bar.html頁(yè)面也不會(huì)檢查bar.html是否存在。
假設(shè)現(xiàn)在用戶導(dǎo)航到了com，然后點(diǎn)擊了后退按鈕，此時(shí)，地址欄將會(huì)顯示har.html，并且頁(yè)面會(huì)觸發(fā)popstate事件，該事件中的狀態(tài)對(duì)象（state object）包含stateObj的一個(gè)拷貝。該頁(yè)面看起來(lái)像foo.html，盡管頁(yè)面內(nèi)容可能在popstate事件中被修改。
如果我們?cè)俅吸c(diǎn)擊后退按鈕，URL將變回hoo.html，文檔將觸發(fā)另一個(gè)popstate事件，這次的狀態(tài)對(duì)象為null?；赝送瑯硬粫?huì)改變文檔內(nèi)容。
pushState（）方法?
此方法有三個(gè)參數(shù)：
狀態(tài)對(duì)象（state object）：一個(gè)js對(duì)象，與用pushState()方法創(chuàng)建的新歷史記錄條目關(guān)聯(lián)。
標(biāo)題（title）：FireFox瀏覽器目前會(huì)忽略該參數(shù)，雖然以后可能會(huì)用上。考慮到未來(lái)可能會(huì)對(duì)該方法進(jìn)行修改，傳一個(gè)空字符串會(huì)比較安全?；蛘撸阋部梢詡魅胍粋€(gè)簡(jiǎn)短的標(biāo)題，標(biāo)明將要進(jìn)入的狀態(tài)。
地址（URL）：新的歷史記錄條目的地址。?
瀏覽器不會(huì)在調(diào)用pushState()方法后加載該地址，但之后，可能會(huì)試圖加載，例如用戶重啟瀏覽器。?
新的URL不一定是絕對(duì)路徑；如果是相對(duì)路徑，它將以當(dāng)前URL為基準(zhǔn)；?
傳入的URL與當(dāng)前URL應(yīng)該是同源的，否則，pushState()會(huì)拋出異常。?
該參數(shù)是可選的；不指定的話則為文檔當(dāng)前URL。
replaceState（）方法?
history.replaceState()操作類似于history.pushState()，不同之處在于replaceState()方法會(huì)修改當(dāng)前歷史記錄條目而并非創(chuàng)建新的條目。
popstate事件?
每當(dāng)激活的歷史記錄發(fā)生變化時(shí)，都會(huì)觸發(fā)popstate事件。如果被激活的歷史記錄條目是由pushState所創(chuàng)建，或是被replaceState方法影響到的，popstate事件的狀態(tài)屬性將包含歷史記錄的狀態(tài)對(duì)象的一個(gè)拷貝。
contenteditable屬性
在HTML5中,通過設(shè)置contenteditable屬性，任何元素都是可編輯的.，可以瞬間把你的網(wǎng)站變成wiki！
!DOCTYPE htmlhtml
body
div contenteditable="true"
This text can be edited by the user. ? ?/div
/body/html12345678
拖放
HTML5 的拖放 API 能夠支持在網(wǎng)站內(nèi)部和網(wǎng)站之間拖放項(xiàng)目。同時(shí)也提供了一個(gè)更簡(jiǎn)單的供擴(kuò)展和基于 Mozilla 的應(yīng)用程序使用的 API。
拖放會(huì)觸發(fā)一系列拖放事件：dragstart、dragenter、dragover、dragleave等。
焦點(diǎn)管理
支持新的 HTML5 activeElement 屬性和 hasFocus 方法。
activeElement
document.activeElement：返回當(dāng)前頁(yè)面中獲得焦點(diǎn)的元素，只讀。
很多情況下,該屬性會(huì)返回一個(gè)input或者textarea元素,于此同時(shí),如果用戶在文本輸入框中選中了一些文本,還可以使用該元素的selectionStart和selectionEnd屬性獲得準(zhǔn)確的選中文本內(nèi)容.
該屬性的值還可能是一個(gè)select元素(下拉菜單)或者type屬性為button,checkbox或radio的input元素.
通常,用戶可以通過Tab鍵來(lái)在頁(yè)面中可以獲得焦點(diǎn)的那些元素中切換,然后按下空格鍵激活這個(gè)元素
如果沒有某個(gè)元素獲得焦點(diǎn),則該屬性的值為當(dāng)前頁(yè)面中的body元素.?
截至目前只有firefox3.6支持。
hasFocus（）
document.hasFocus() 方法返回一個(gè) Boolean，表明當(dāng)前文檔或者當(dāng)前文檔內(nèi)的節(jié)點(diǎn)是否獲得了焦點(diǎn)。
設(shè)備訪問
使用camera API
可以參考什么是HTML5（二）中相關(guān)部分。
觸摸事件
略
使用地理位置定位
地理位置 API 允許用戶向 Web 應(yīng)用程序提供他們的位置。出于隱私考慮，報(bào)告地理位置前會(huì)先請(qǐng)求用戶許可。
地理位置 API 通過 navigator.geolocation 提供。
獲取當(dāng)前定位
可以調(diào)用 getCurrentPosition() 函數(shù)獲取用戶當(dāng)前定位位置。?
這會(huì)異步地請(qǐng)求獲取用戶位置，并查詢定位硬件來(lái)獲取最新信息。當(dāng)定位被確定后，定義的回調(diào)函數(shù)就會(huì)被執(zhí)行。
navigator.geolocation.getCurrentPosition(function(position) {
do_something(position.coords.latitude, position.coords.longitude);});123
檢測(cè)設(shè)備方向
越來(lái)越多支持web功能的設(shè)備擁有檢測(cè)自身方向的能力了；也就是說，這些設(shè)備可以記錄下其受地心引力作用下而在方向上產(chǎn)生變化的數(shù)據(jù)。
有兩種js事件負(fù)責(zé)處理方向信息。
DeviceOrientationEvent：會(huì)在加速度傳感器檢測(cè)到設(shè)備在方向上發(fā)生變化時(shí)觸發(fā)。
DeviceMotionEvent：會(huì)在加速度發(fā)生改變時(shí)觸發(fā)。
如何在Xendesktop7中配置Html5訪問虛擬桌面
步驟一：在Citrix StoreFront里啟用 Receiver for HTML5
請(qǐng)跟隨如下步驟在XenDesktop7環(huán)境中啟用Receiver for HTML5。您需要登錄您的Delivery Controller并使用Citrix StoreFront management console，當(dāng)然你也可以從Citrix Studio或者Citrix StoreFront console里進(jìn)行。打開Citrix Studio management console，點(diǎn)擊Receiver for Web。
在中間窗格里，確保選擇了您想要的Store。
在右邊的窗格中，在Actions Store Web Receiver 點(diǎn)擊Deploy Citrix Receiver。
開啟Receiver for HTML5有三個(gè)選項(xiàng)：
Install locally
Use Receiver for HTML5 if local install fails
Always use Receiver for HTML5
選擇Use Receiver for HTML5 if local install fails。
步驟二：在Citrix Studio里啟用ICA WebSockets 連接策略。
在Citrix Studio配置完成后，在Citrix Studio management console里按照如下步驟開啟WebSockets策略。這里，您可以查看相eDocs：Modify an existing (default) policy。
在Citrix Studio里打開Policies。
在中間的窗格里，在Policies下修改現(xiàn)有的策略或者新建一個(gè)策略。
在右邊的窗格點(diǎn)擊Actions Edit Policy…。
在Edit Unfiltered窗口中輸入“WebSockets”并輕擊回車。您可以找到3條與WebSockets相關(guān)的策略設(shè)置。點(diǎn)擊每一條后面的Select。
如何html5在瀏覽器里訪問手機(jī)后置攝像頭
1）獲取視頻流
添加一個(gè)HTML5的Video標(biāo)簽，并將從攝像頭獲得視頻作為這個(gè)標(biāo)簽的輸入來(lái)源
var video = document.getElementByIdx_x_x("video");
navigator.getUserMedia({video:true}, function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
}, function (error) { alert(error); });
2）拍照
關(guān)于拍照功能，采用HTML5的Canvas實(shí)時(shí)捕獲Video標(biāo)簽的內(nèi)容，Video元素能作為Canvas圖像的輸入
function scamera() {
var videoElement = document.getElementByIdx_x_x('video');
var canvasObj = document.getElementByIdx_x_x('canvas1');
var context1 = canvasObj.getContext('2d');
context1.fillStyle = "#ffffff";
context1.fillRect(0, 0, 320, 240);
context1.drawImage(videoElement, 0, 0, 320, 240);
}
3）圖片獲取
要從Canvas獲取圖片數(shù)據(jù)，其核心思路是用canvas的toDataURL將Canvas的數(shù)據(jù)轉(zhuǎn)換為base64位編碼的PNG圖像
var imgData=canvas.toDataURL(“image/png”);
imgData格式如下：”data:image/png;base64,xxxxx“
真正圖像數(shù)據(jù)是base64編碼逗號(hào)之后的部分
轉(zhuǎn)載，僅供參考。
分享名稱：html5訪問,html5鏈接
分享URL：http://fisionsoft.com.cn/article/dsdhgjs.html
