wp加載本地HTML（附帶圖片，CSS，JS）
Windows Phone：Load Local HTML with Img,Css,Js
by 唐小崇
http://www.cnblogs.com/tangchong
WindowsPhone中，使用WebBrower控件可以加載HTML文件。其中包括:
1、本地以加載html文件流的形式加載HTML內容: webBrowser1.NavigatetoSting("<html>HTML內容.....</html>");
2、本地加載中靜態HTML頁面：webBrowser1.Navigate(new Uri("xxx.htm",UriKind.Relative));
3、加載網絡上的Web頁面：webBrowser1.Navigate(new Uri("http://www.cnblogs.com",UriKind.Absolute));
在加載本地HTML時，
若使用方法1，可以成功讀入HTML並顯示，但並不會加載其帶有的圖片，js文件，css文件。
若對具有圖片的直接html使用方法2，由於沒有載入圖片，js文件，css文件，會出現您訪問的頁面遇到問題提示。
那怎么加載呢？本博文提供一個解決方案，以百度百科的某一網頁為例。
思路是：將HTML頁面和其帶有的資源文件，按照HTML設定的src相對路徑，存放到wp的獨立存儲空間中。這樣在加載獨立存儲中的HTML時，HTML指定的資源src鏈接都有效。這樣通過方法2，圖片，js，css都能正常被指引了。
下面我們看具體例子：
首先，我們ctrl+S把示例網頁下載下來，得到
一個html文件，一個資源文件的文件夾。把它們放入項目中。
第一步：我們要做的是獲取項目中HTML所有資源文件的文件路徑（保存進獨立存儲時必需）
對於wp8而言，非常簡單：
//讀取Assets/build/歷史頻道_百度百科_files文件夾下的所有文件。以放入獨立存儲。（只支持wp8） string[] files = System.IO.Directory.GetFiles("Assets/build/歷史頻道_百度百科_files", "*.*");
但是，對於wp7由於安全設定原因，不支持GetFiles，並且沒有提供GetFiles的替代方法EnumerateFiles。本人想到的替代是：從HTML里讀取那些資源的路徑信息，再整合一下。
從HTML里讀數據，用到了一個常用的第三方庫。HtmlAgilityPack（可通過NuGet加載引用），它可以很好的解析HTML各個標簽數據。
①把HTML數據讀入。
var reader = new StreamReader(TitleContainer.OpenStream("Assets/build/baidu.htm")); htmlDocument.LoadHtml(reader.ReadToEnd());
②從HTML中讀出想要的數據，下面是我寫的功能函數：
/// <summary> /// 從指定的HTML的標簽里讀取指定類型的所有文件的完整路徑，存入filePaths數組中。該文件的類型由suffixName參數指定。 /// </summary> /// <param name="tagName">指定標簽名</param> /// <param name="suffixName">指定文件的后綴名</param> private void ReadFilePathbyTagName(string tagName, string suffixName) { var keyNodes = htmlDocument.DocumentNode.SelectNodes(tagName); foreach (HtmlNode keyNode in keyNodes) { for (int i = 0; i < keyNode.Attributes.Count; i++ ) { if (keyNode.Attributes[i].Value.Contains(suffixName)) filePaths.Add("Assets/build/歷史頻道_百度百科_files\\" + keyNode.Attributes[i].Value.Split('/').Last()); } } }
③在本例中，指定從img標簽里讀取.jpg文件，script標簽中讀取.js文件，link文件中讀取.css文件即可獲得想要的文件。再把html文件和表示logo的png文件的路徑也保存在filePaths數組中，就完成的第一步的任務了。
ReadFilePathbyTagName("//link",".css"); ReadFilePathbyTagName("//script", ".js"); ReadFilePathbyTagName("//img", ".jpg"); filePaths.Add("Assets/build/歷史頻道_百度百科_files\\logo-baike.png"); filePaths.Add("Assets/build\\baidu.htm");
第二步即為存入獨立存儲了。通過filePaths數組中存放的地址，讀入資源。再根據每個資源中的路徑，創建獨立存儲里文件路徑，最后把文件存入。
var storage = IsolatedStorageFile.GetUserStoreForApplication(); string folderPath; foreach (string file in filePaths) { using (Stream stream = Application.GetResourceStream(new Uri(file, UriKind.Relative)).Stream) { folderPath = file.Split('\\')[0]; if (!storage.DirectoryExists(folderPath)) { storage.CreateDirectory(folderPath); } MemoryStream temStream = new MemoryStream(); stream.CopyTo(temStream); lock (this) { string fullPath = file; using (var fileStream = storage.OpenFile(fullPath, FileMode.OpenOrCreate, FileAccess.Write)) { temStream.Position = 0; temStream.CopyTo(fileStream); } } } }
第二部完成，則通過代碼2載入獨立存儲里的HTML文件。即可以實現將HTML文件完整的載入了。
下面是對比圖：