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);
                        }
                    }
                }
            }