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

时间：2022-09-24 13:22:57

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）

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&period;0&period;0 下之加载本地缓存的图片

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

  4. YII2-按需加载并管理静态资源&lpar;CSS&comma;JS&rpar;

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

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

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

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

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

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

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

  8. 转&colon;Android Webview 加载外部html时选择加载本地的js&comma;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. CodeForces 618A Slime Combining

    http://www.codeforces.com/contest/618/problem/A 明明觉得是水题,而我却做了一个小时. 明明觉得代码没有错,而我却错了好几次. 因为我的名字不叫明明,也不 ...

  2. selenium WebDriver 操作高德地图

    String URL="http://www.amap.com/"; WebDriver driver = new FirefoxDriver(profile); driver.g ...

  3. orcale 动态执行语句

    create or replace function fn_test2(tablename in varchar2) return number is rtn number; begin --通用的获 ...

  4. ScriptManager和UpdatePanel控件实现局部刷新

    ScriptManager和UpdatePanel控件联合使用可以实现页面异步局部更新的效果.其中的UpdatePanel就是设置页面中异步局部更新区域,它必须依赖于ScriptManager存在,因 ...

  5. mysql导入到elasticsearch

    JDBC importer for Elasticsearch Java Database 连接(JDBC) 导入运行获取数据从JDBC 源 安装: 1.在下面的步骤 替换<version&gt ...

  6. &lbrack;SAP&rsqb; 外部系统调用SAP web service用户验证的简单方法

    场景: 一个Java系统调用SAP系统提供的web service,除了根据WSDL生成的代理类,调用相应方法,传入相应参数外,还等需要使用SAP提供的用户信息进行身份验证,最简单的方法是在soap请 ...

  7. docker用法记录

    下载docker镜像 docker pull ubuntu 查看所有docker镜像 docker images 运行docker镜像且进入shell docker run -it ubuntu ba ...

  8. 痞子衡嵌入式：常用的数据差错控制技术（1）- 重复校验&lpar;Repetition Code&rpar;

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家讲的是嵌入式里数据差错控制技术-重复校验. 在嵌入式应用里,除了最核心的数据处理外,我们还会经常和数据传输打交道.数据传输需要硬件传输接口的支持 ...

  9. springboot读取properties和yml配置文件

    一.新建maven工程:springboot-configfile-demo,完整工程如下: pom.xml <?xml version="1.0" encoding=&qu ...

  10. Excel技巧--漏斗图让转化率直观明了

    当要实现如上图那样表现转化率等漏斗形图表时,可以这么做: 1.选择表格,点击“插入”-->“二维条形图”-->堆积条形图类型: 2.点击选中图表,点击”设计“-->“选择数据”: 将 ...

相关文章