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把示例网页下载下来，得到aaarticlea/png;base64,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" alt="" />一个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 = ; 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('\\')[]; 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 = ;
temStream.CopyTo(fileStream);
}
}
}
}
第二部完成，则通过代码2载入独立存储里的HTML文件。即可以实现将HTML文件完整的载入了。
下面是对比图：
