WP 让WebBrowser从独立存储中加载css/js文件以及图片文件

最新推荐文章于 2021-08-03 22:50:29 发布

Kinley

最新推荐文章于 2021-08-03 22:50:29 发布

阅读量2.2k

点赞数

分类专栏： Windows Phone 文章标签： Windows Phone

Windows Phone 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

介绍：

在我们的Windows Phone 7项目中，有可能需要动态生成一些HTML字符串或者从WebService上获取一段HTML字符串，然后将这些HTML字符串在WebBrowser控件上显示，那么一般在这种情况下你可能需要将对应的js文件,css文件以及图片文件保存在应用程序安装包内而非从网络上获取。

解决方案：

为了演示如何做到这一点，我们演示一个来自从webservice上获取的html代码。

<div data-role='fieldcontain'>
 <fieldset data-role='controlgroup'>
  <legend>Do you agree to this request?</legend>
  <input type='checkbox' name='agree-1' id='agree-1' />
  <label for='agree-1'>I agree</label>
 </fieldset>
</div>

如上图，html需要调用来自jquery Mobile的data-role，在我们这个演示中，将在xap安装包中将包含jqueryMobile的所有js文件以及css文件。

首先要添加这些文件到项目的指定目录中，然后将这些文件的"Build Action"设置为"Content"。接着下一步我们先创建一个构建HTML的方法BuildHTML将拼接来自WebService的html代码。

public string BuildHTML(string htmlFromWS)
{
    StringBuilder html = new StringBuilder(@"<!DOCTYPE html>
                    <html class=""ui-mobile-rendering"">
                    <head>
                        <meta charset=""utf-8"" />
                        <meta name=""viewport"" content=""initial-scale=1.0; maximum-scale=1.0"" />
                        <link rel=""stylesheet"" type=""text/css"" href=""/html/jquery.mobile.structure-1.0.1.min.css"" />
                        <link rel=""stylesheet"" type=""text/css"" href=""/html/style.css"" />
                        <script type=""text/javascript"" src=""/html/jquery-1.7.1.min.js""></script>
                        <script type=""text/javascript"" src=""/html/jquery.mobile-1.0.1.min.js""></script>
                    </head>
                    <body style=""-webkit-user-select: none;"">
                        <div style=""padding:80px 0 0 0"" data-role=""page"">
                        <div data-role=""content"">");
 
    html.Append(htmlFromWS);
    html.Append("</div></div></body></html>");
    return html.ToString();
}

如上图，所有的css文件以及js文件的加载路径都是/html/... 这种形式，这就意味着webbrowser控件将通过相对Uri从独立存储中加载这些文件。但不幸的是我们无法将这些文件就这么直接添加到独立存储中，而只能先添加到解决方案目录里面，所以这里需要创建一个方法来完成这个需求 CopyContentToIsolatedStorage.

public static void CopyContentToIsolatedStorage(string file)
{
    // Obtain the virtual store for the application.
    IsolatedStorageFile iso = IsolatedStorageFile.GetUserStoreForApplication();
 
    if (iso.FileExists(file))
        return;
 
    var fullDirectory = System.IO.Path.GetDirectoryName(file);
    if (!iso.DirectoryExists(fullDirectory))
        iso.CreateDirectory(fullDirectory);
 
    // Create a stream for the file in the installation folder.
    using (Stream input = Application.GetResourceStream(new Uri(file, UriKind.Relative)).Stream)
    {
        // Create a stream for the new file in isolated storage.
        using (IsolatedStorageFileStream output = iso.CreateFile(file))
        {
            // Initialize the buffer.
            byte[] readBuffer = new byte[4096];
            int bytesRead = -1;
 
            // Copy the file from the installation folder to isolated storage. 
            while ((bytesRead = input.Read(readBuffer, 0, readBuffer.Length)) > 0)
            {
                output.Write(readBuffer, 0, bytesRead);
            }
        }
    }
}

接着在WP7的页面初始化方法中添加以下代码：

CopyContentToIsolatedStorage("html/themes/images/ajax-loader.png");
CopyContentToIsolatedStorage("html/themes/images/icons-18-black.png");
CopyContentToIsolatedStorage("html/themes/images/icons-18-white.png");
CopyContentToIsolatedStorage("html/themes/images/icons-36-black.png");
CopyContentToIsolatedStorage("html/themes/images/icons-36-white.png");
 
CopyContentToIsolatedStorage("html/jquery-1.7.1.min.js");
CopyContentToIsolatedStorage("html/jquery.mobile-1.0.1.min.js");
CopyContentToIsolatedStorage("html/style.css");
CopyContentToIsolatedStorage("html/jquery.mobile.structure-1.0.1.min.css");

然后，我们只需要拼接好HTML字符串然后发送到WebBrowser控件就行了，但是，请小心，为了强制WebBrowser控件加载html代码以及所有对应的文件，你必须将html代码也以文件的方式存储到独立存储中，而且还必须存储到与css/js文件相同的根目录中。

string htmlFromWS = ...;
// Concat our html
string html = BuildHTML(htmlFromWS);
var bytes = Encoding.UTF8.GetBytes(html);
// Get the iso store
IsolatedStorageFile iso = IsolatedStorageFile.GetUserStoreForApplication();
// Write the html in the html/index.html
using (IsolatedStorageFileStream output = iso.CreateFile("html/index.html"))
{
    output.Write(bytes, 0, bytes.Length);
}
// navigate to the html/index.html
wb.Navigate(new Uri("html/index.html", UriKind.Relative));

终于，现在WebBrowser控件将从独立存储中加载css/js文件以及你的html代码！

Kinley

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WP 让WebBrowser从独立存储中加载css/js文件以及图片文件

介绍：在我们的Windows Phone 7项目中，有可能需要动态生成一些HTML字符串或者从WebService上获取一段HTML字符串，然后将这些HTML字符串在WebBrowser控件上显示，那么一般在这种情况下你可能需要将对应的js文件,css文件以及图片文件保存在应用程序安装包内而非从网络上获取。解决方案：为了演示如何做到这一点，我们演示一个来
复制链接

扫一扫

专栏目录