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. java中IO写文件工具类

    以下是一些依据经常使用java类进行组装的对文件进行操作的类,平时,我更喜欢使用Jodd.io中提供的一些对文件的操作类,里面的方法写的简单易懂. 当中jodd中提供的JavaUtil类中提供的方法足 ...

  2. c# 字符串切割 split

    一直以来  都以为 string.split 里面 就只能是 一个 char 实际不是 那么回事 参数 可以是 string. eg: string strtest = "asdfg12we ...

  3. android详细信息java.util.ConcurrentModificationException变态

    在今天做android当项目,我遇到了这个异常,好吧.其实最不寻常遇到异常IllegalstateException.它们与我们的硬件连接SDK抛出,我想折磨学生阿玉啊.扯远了. 今天,我想回到这个异 ...

  4. Facebook Hack 语言 简介

    1. Hack 是什么? Hack 是一种基于HHVM(HipHop VM 是Facebook推出的用来执行PHP代码的虚拟机,它是一个PHP的JIT编译器,同时具有产生快速代码和即时编译的优点.)的 ...

  5. Objective-C的动态特性

    最近几年中涌现了大量的Objective-C开发者.有些是从动态语言转过来的,比如Ruby或Python,有些是从强类型语言转过来的,如Java或C#,当然也有直接以Objective-C作为入门语言 ...

  6. 国籍控件（js源码）

    国籍控件(js源码) 一直苦于没有好的国籍控件可以用,于是抽空写了一个国籍控件,现分享给大家. 主要功能和界面介绍 国籍控件主要支持中文.英文过滤以及键盘上下事件. 源码介绍 国籍控件核心是两个文件, ...

  7. Appium0.18.x迁移到Appium1.x须知事项

    英文原版:https://github.com/appium/appium/blob/master/docs/en/advanced-concepts/migrating-to-1-0.md Migr ...

  8. 注意，WebDeploy服务会占用80端口。（Windows关闭了IIS，80端口任然被占用）

    最近遇到一个很奇怪的事情,Windows上的 IIS 网站 全关掉了,80端口仍然被占用.然后我新装了一台服务器,一个一个组件地装,装一个测一次,最后发现,WebDeploy这个组件,会占用80端口. ...

  9. ser2net使用

    在ubuntu下或者openwrt下安装了ser2net程序之后,可以将串口中的数据转发为以太网数据. 设置在/etc/ser2net.conf中最后: 3002:0:/dv/ttyUSB0:1152 ...

  10. Android 实现用户列表信息的功能，然后选择删除幻灯片删除功能

    在项目开发过程中.经常须要对用户列表的信息进行删除的操作.Android中经常使用的删除操作方式有两种 .一种就是类似微信的滑动出现删除button方式,另一种是通过CheckBox进行选择.然后通过 ...