wp加载本地HTML（附带图片，CSS，JS）

时间 2019-12-01

标签加载本地 html 附带图片 css 栏目 HTML 繁體版

原文原文链接

wp加载本地HTML（附带图片，CSS，JS）css

Windows Phone：Load Local HTML with Img,Css,Jshtml

by 唐小崇web

http://www.cnblogs.com/tangchong数组

WindowsPhone中，使用WebBrower控件能够加载HTML文件。其中包括:安全

一、本地以加载html文件流的形式加载HTML内容: webBrowser1.NavigatetoSting("<html>HTML内容.....</html>");网络

二、本地加载中静态HTML页面：webBrowser1.Navigate(new Uri("xxx.htm",UriKind.Relative));函数

三、加载网络上的Web页面：webBrowser1.Navigate(new Uri("http://www.cnblogs.com",UriKind.Absolute));ui

在加载本地HTML时，this

若使用方法1，能够成功读入HTML并显示，但并不会加载其带有的图片，js文件，css文件。spa

若对具备图片的直接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文件完整的载入了。

下面是对比图：