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

最新推荐文章于 2014-11-02 16:18:26 发布

muxiaobo

最新推荐文章于 2014-11-02 16:18:26 发布

阅读量1k

点赞数

文章标签： webbrowser 存储 microsoft webservice html stylesheet

介绍：

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

解决方案：

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

 
<span style="font-family:'Microsoft YaHei';"><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></span>

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

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

 
<span style="font-family:'Microsoft YaHei';">public string BuildHTML(stringhtmlFromWS)
 
{
 
    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();
 
}</span>

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

 
<span style="font-family:'Microsoft YaHei';">public static voidCopyContentToIsolatedStorage(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);
 
            }
 
        }
 
    }
 
}</span>

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

 
<span style="font-family:'Microsoft YaHei';">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");</span>

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

 
<span style="font-family:'Microsoft YaHei';">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));</span>

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

好了，你也可以从这里下载到整个演示的源码： Download Source_code.zip - 102.33 KB

muxiaobo

关注

0
点赞
踩
0

收藏

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

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

扫一扫