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文件完整的载入了。

下面是对比图：

wp加载本地HTML（附带图片，CSS，JS）的更多相关文章

  1. vue中的img src 动态加载本地json的图片路径写法。

    目录: 注意:本地json文件和json文件里的图片地址都必须写在static 静态文件夹里:否则json文件里的url地址找不到. major_info.json文件里的图片路径写法 页面通过v-b ...

  2. django 加载静态文件（图片，js，css）

    昨天写过一个项目通过django上传展示图片,但是今天写项目的时候发现出现了问题,静态文件加载不出来了,尴尬的一笔~ 记录一下静态文件的使用方法,基础~ ----------------------- ...

  3. Glide 4.0.0 下之加载本地缓存的图片

    在网上搜了下,无意中发现RequestOptions还有个方法: onlyRetrieveFromCache 用了下是OK的 try { File imageFile = Glide.with(con ...

  4. YII2-按需加载并管理静态资源(CSS,JS)

    参考博客: https://segmentfault.com/a/1190000003742452#articleHeader5

  5. WebView加载本地Html文件并实现点击效果

    Webview是用来与前端交互的纽,可以加载本地Html文件,和网页并实现交互的功能. WebView通过WebSetting可以使用Android原生的JavascriptInterface来进行j ...

  6. wpf中使用cefsharp加载本地html网页并实现cs和js的交互,并且cefsharp支持any cpu

    废话少说,直接上代码: 第一步: 第二步: 第三步: 第四步: App.xaml.cs对应的代码: using CefSharp; using CefSharp.Wpf; using System; ...

  7. #iOS问题记录#动态Html加载本地CSS和JS文件

    所谓动态Html,指代码中组合生成的html字符串: 若需要加载本地CSS,图片,JS文件,则, 1,需要文件的全路径: 2,需要"file:///"标志: 例如: //获取文件全 ...

  8. 转:Android Webview 加载外部html时选择加载本地的js,css等资源文件

    原文地址:http://m.blog.csdn.net/blog/qduningning/43196819 在使用WebView加载网页的时候,有一些固定的资源文件如js的jquery包,css,图片 ...

  9. 用UIWebView加载本地图片和gif图

    加载gif图: NSData *gif = [NSData dataWithContentsOfFile: [[NSBundle mainBundle] pathForResource:@" ...

随机推荐

  1. [CLR via C#]5.4 对象哈希码和dynamic基元类型

    原文:[CLR via C#]5.4 对象哈希码和dynamic基元类型 FCL的设计者认为,如果能将任何对象的任何实例放到一个哈希表集合中,会带来很多好处.为此,System.Object提供了虚方 ...

  2. Codeforces #180 div2 C Parity Game

    // Codeforces #180 div2 C Parity Game // // 这个问题的意思被摄物体没有解释 // // 这个主题是如此的狠一点(对我来说,),不多说了这 // // 解决问 ...

  3. centos7看电影

    sudo rpm -Uvh https://dl.fedoraproject.org/pub/epel/7/x86_64/e/epel-release-7-5.noarch.rpm sudo rpm ...

  4. sql server drop talbe 自动删除关联的外键 ,权限体系（一）

    if object_id('Proc_DropTableWithFK') is not null begin drop proc dbo.Proc_DropTableWithFK end GO ) a ...

  5. Xcode下执行HelloWorld

    准备工作 到Cocos2d-x官方站点下载最新版本号v3.0beta2 创建HelloWorld项目 将刚才下载的压缩包解压到你指定的目录里. 进入到文件夹**cocos2d-x-3.0beta2/t ...

  6. 当今最流行的Node.js应用开发框架简介

    快速开发而又容易扩展,高性能且鲁棒性强.Node.js的出现让所有网络应用开发者的这些梦想成为现实.但是,有如其他新的开发语言技术一样,从头开始使用Node.js的最基本功能来编写代码构建应用是一个非 ...

  7. IBM、京东、携程、eBay 的 OpenStack 云

    我所了解的 IBM.京东.携程.eBay 的 OpenStack 云 参加过几次 OpenStack meetup 活动,听过这几家公司的Architect 讲他们公司的 OpenStack产品.本文 ...

  8. Gimp教程:简约手机图标风格

    效果:       在一个国外博客上翻到的图标制作教程,效果类似于Cowon J3的默认图标风格. 制作过程很简单,只需两三步,不多说了,上步骤 Step1.新建50×50的黑色背景 Step2.新建 ...

  9. 使用Visual Source Safe 2005 - 初学者系列 - 学习者系列文章

    本文介绍微软的Visual Source Safe 2005工具的使用 1.  打开该软件,选择“新建数据库” 2.  显示欢迎页 3.选择路径.这里是服务器上代码存放的目录. 4.这里选择第一项 5 ...

  10. FineUI开发实践

    ASP.NET-FineUI开发实践-7 摘要: 下拉显示grid列表.其实很简单,但是试了很多方法,水平有限,主要是都不好使,还是简单的好使了,分享下.先是看了看网上的,是直接写个了extjs控件类 ...