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. uboot中raise：Signal #8 caught的根本原因

    在移植uboot时编译一切正常,但uboot启动中载入自己写的网卡驱动出现故障,一直在打印raise:Signal #8 caught google  百度了一番,也有非常多人遇到了这个问题,大家都说 ...

  2. c# 官方命名规则

    官方的哦. https://msdn.microsoft.com/zh-cn/library/vstudio/ff926074(v=vs.110).aspx

  3. Factorization Machines 学习笔记（二）模型方程

      近期学习了一种叫做 Factorization Machines(简称 FM)的算法,它可对随意的实值向量进行预測.其主要长处包含: 1) 可用于高度稀疏数据场景:2) 具有线性的计算复杂度.本文 ...

  4. IplImage 封装释放

    IplImage是openCV库中非常重要的一个结构体,库中的图像都是保存为这个结构体后再进行操作的,详细结构例如以下: </pre><pre> typedef struct ...

  5. ARC注意的泄漏问题

    --------- block中常见的泄漏问题 代码中block经常用到.例如网络请求?一些图形分析处理等,就是比较耗时的操作,多线程gcd然后进行操作. 这个时候,会使用block进行处理,然后调用 ...

  6. 使用.NET REACTOR制作软件许可证

    原文:使用.NET REACTOR制作软件许可证 软件下载地址:http://www.eziriz.com/downloads.htm 做一个简单的许可证系统,下面是具体步骤: 1,  OPEN AS ...

  7. 对于GetBuffer() 与 ReleaseBuffer() 的一些分析

    先 转载一段别人的文章 CString类的这几个函数, 一直在用, 但总感觉理解的不够透彻, 不时还实用错的现象. 今天抽时间和Nico一起分析了一下, 算是拨开了云雾: GetBuffer和Rele ...

  8. 使用Scala操作Mongodb

    介绍 Scala是一种功能性面向对象语言.它融汇了很多前所未有的特性.而同一时候又执行于JVM之上.随着开发人员对Scala的兴趣日增,以及越来越多的工具支持,无疑Scala语言将成为你手上一件不可缺 ...

  9. SQL Server 2012的附件失败，与硬链接的问题

    1.我在系统上做了硬链接,也就是把C盘的某个目录,映射为D盘. 2.把数据库文件mdf和ldf放入D盘.结果,SQL Server的企业管理器,无法从D盘里加载mdf或ldf文件,并且在目录下无法显示 ...

  10. php学习之路：php在iconv功能 详细解释

    iconv函数库可以完毕各种字符集间的转换,是php编程中必不可少的基础函数库. 使用方法例如以下: $string = "亲爱的朋友欢迎訪问胡文芳的博客.希望给您带来一点点的帮助!&quo ...