簡介： web 作業系統有著傳統作業系統無法比擬的優勢，如可以隨時隨地利用任何終端進行訪問，資料儲存在伺服器端，空間更大，資料安全性更好，可以利用伺服器端的 cpu、記憶體等資源進行更為複雜的運算。然而目前的 web 作業系統前端大多基於 flex、silverlight、activex 外掛程式等技術開發，存在著對移動裝置的支援性差，終端安全性差，開發難度大等缺點。
html5 是下一代 web 語言的標準，具有相容性好，安全性高，功能豐富，開發便捷等優點，特別適合如 web 作業系統一類的富客戶端網際網路應用的前端開發。本文將展示如何利用 html5 提供的多種新技術如：本地資料庫、多執行緒開發、**支援、離線程式設計等構建乙個基本的 web 作業系統。
簡介傳統的作業系統有著一些難以克服的缺點，如僅能在本地終端訪問，或僅支援有限的遠端訪問，限於本地終端的資源，計算能力薄弱，儲存空間有限，缺乏強大的防火牆等一系列安全機制，安全性較差。鑑於以上缺點，web 作業系統應運而生 – web 作業系統是一種基於瀏覽器的虛擬的作業系統，使用者通過瀏覽器可以在其中進行應用程式的操作，以及相關資料的儲存。web 作業系統提供的基本服務有文字文件的建立與儲存，音訊**檔案的**與儲存，提供對時間資訊的支援等，更高階的服務則包含即時通訊，郵件甚至遊戲等服務。web 作業系統克服了傳統作業系統的缺點，在網路的支援下，它可以在任何時間，任何地點經由任何支援 web 的終端進行訪問，可以利用伺服器端無限的計算及儲存資源，使用者資料儲存在伺服器端，安全性較高。
相關技術
目前構建 web 作業系統的前端技術主要有 flex、silverlight、activex 外掛程式等等，它們各有一些優缺點。
flex
flex 是乙個優秀的富客戶端應用框架，專注於頁面顯示，adobe 專業維護，統一穩定，而且其指令碼語言 actionscript3 是物件導向的，非常適合程式設計師使用。缺點則是耗能高，占用頻寬多，對移動應用的支援性差。
silverlight
silverlight 是由微軟推出的用以跟 flash 抗衡的 ria（富網際網路應用）解決方案，優點是具備硬體級的加速功能，但它目前仍不成熟，對非 windows 系統的支援性並不夠好，且學習難度較大。
activex 外掛程式
activex 外掛程式同樣是微軟推出的 ria 解決方案，它是乙個開放的解決方案，可以相容多種語言，不過它的缺點也是顯而易見的，使用者需要調整瀏覽器的安全等級並**外掛程式才能執行 ria 應用，極大地降低了安全性。
html5
為推動 web 標準化運動的發展，w3c 推出了下一代 html 的標準 – html5，為眾多的公司所支援，因此具有良好的前景。它有以下特點：首先，為增強使用者體驗，強化了 web 網頁的表現效能；其次，為適應 ria 應用的發展，追加了本地資料庫等 web 應用的功能；再次，由於高度標準化以及諸多瀏覽器廠商的大力支援，它的相容性和安全性非常高；最後它是一種簡潔的語言，容易為廣大開發者掌握。更為難得的是，由於節能和功耗低，在移動裝置上 html5 將具有更大的優勢。因此更適合如 web 作業系統一類的 ria 應用的前端開發。
系統簡介
本系統基於 html5 開發，利用 html5 引入的多種新技術如拖拽 api、**標籤、本地資料庫、draw api、多執行緒開發、離線程式設計等提供了乙個基本的 web 作業系統環境，包含了對桌面的支援、應用程式的支援，提供了乙個簡單的****器和記事本以及乙個時鐘，並對系統日誌進行了記錄，此外還提供了對離線狀態的支援。
桌面實現
系統對桌面的支援主要包括應用程式圖示的開啟與拖拽，以及桌面的上下文選單等。
桌面拖拽
桌面的布局由一定數量的 div 組成，它們按照次序依次排列在矩形的桌面上，為應用程式圖示的開啟與拖拽提供了基本的支援。
清單 1. 建立 div
var iconholder = document.createelement("div");
iconholder.id = 'iconholder' + i;
iconholder.classname = "iconholder";
maindiv.appendchild(iconholder);
html5 提供了對 drag 事件的支援，大大簡化了實現拖拽的難度。通過對 dragstart 事件的監聽，將被拖拽的應用程式圖示所在的 div 記錄下來，作為拖拽的源。
清單 2. 拖拽支援
iconholder.addeventlistener("dragstart", function(ev) , false);
iconholder.addeventlistener("drop", function(ev) else if(ev.currenttarget.firstchild)else
}, false);
通過對 drop 事件的監聽，可以獲取拖拽的源，以及拖拽的目標 div。若目標 div 為空，則將源 div 中的應用程式圖示轉移至目的 div 中。若目標 div 中已包含應用程式圖示，則將兩個圖示的位置互換。若**站圖示處於目標 div 中，**站將發揮作用並將源 div 中的應用程式圖示刪除。圖 1 顯示了桌面拖拽的效果。
圖 1. 桌面拖拽效果
程式開啟
程式可以以兩種方式開啟，左鍵點選或通過上下文選單開啟。
通過監聽 div 的 onclick 事件，獲取要開啟的應用程式 id，並利用 openapp 方法開啟相應的應用程式可實現對左鍵點選的支援。
清單 3. 左鍵點選
iconholder.onclick = function(ev)
};通過監聽 div 的 oncontextmenu 事件，獲取要開啟的應用程式 id，並利用 openappcontextmenu 方法顯示相應應用程式的上下文選單，可實現對右鍵上下文選單的支援。
清單 4. 上下文選單
iconholder.oncontextmenu = function(ev)
return false;
};利用相應應用程式的 id，可以獲取對應應用程式的指令碼，並執行，同時在系統日誌中記錄下相應的操作。
清單 5. 程式開啟
function openapp(appid)
清單 6. 開啟程式上下文選單
function openappcontextmenu(appid, ev){
var appcontextmenu = document.getelementbyid("appcontextmenu");
appcontextmenu.style.display="block";// 令上下文選單可見
appcontextmenu.style.pixeltop=ev.clienty;// 設定上下文選單位置
appcontextmenu.style.pixelleft=ev.clientx;
appcontextmenu.style.background = "#eee";
appcontextmenu.style.color = "black";
appcontextmenu.style.fontsize = "30";
appcontextmenu.style.width = "200px";
appcontextmenu.style.height = "220px";
appcontextmenu.style.opacity = 0.5;// 令上下文選單透明度為 50%
appcontextmenu.innerhtml = "";
// 獲取應用程式相應上下文選單的內容
var apps = getapps();
for(var i=0; i
if(apps[i].appid == appid){
for(var j=0; j
appcontextmenu.innerhtml += "
onclick=\"appcontextmenu.style.display='none';" +
apps[i].contextmenu[j].action + "\"
onmouseover='this.style.background=\"darkblue\"'
onmouseout='this.style.background=\"#eee\"'>"
+apps[i].contextmenu[j].name+"
HTML5 儲存 離線web應用
cookie儲存 每次http請求都會傳送cookie資訊，會使web變慢 每次http請求的cookie資訊不加密傳輸，不安全 cookie資訊量最大不能超過4kb 檢測瀏覽器是否支援該特性 function supports html5 storage html5儲存是基於鍵值對的 方法 set...
HTML5的Web儲存應用
一 介紹 html5 web儲存,乙個比cookie更好的本地儲存方式。1 什麼是html5 web儲存 使用html5可以在本地儲存使用者的瀏覽資料。早些時候,本地儲存使用的是cookie。但是web儲存需要更加的安全與快速，這些資料不會被儲存在伺服器上，但是這些資料只用於使用者請求 資料上，它也...
HTML5學習（四） Web表單
src rubber ies.controls audio metadata告訴瀏覽器先獲取音訊檔案開頭的資料，從而足以確定基本資訊 與audio有著相同的src controls preload auto play loop 某些html5瀏覽器支援的標準 對音訊格式 要支援多種格式，就要刪除sr...