wp加载本地HTML（附带图片，CSS，JS）
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文件完整的载入了。
下面是对比图：
