在 WebBrowser 控件中包含来自 IsolatedStorage 的静态 JS / CSS / 图像文件
5.00/5 (3投票s)
在 WebBrowser 控件中包含来自 IsolatedStorage 的静态 JS / CSS / 图像文件
引言
在你的项目中，你可能需要生成动态 HTML，或者从 Web 服务获取 HTML 片段并在 WebBrowser 控件中显示它。 在这些情况下，你不会随时从网络加载 JS、CSS 或图像，而是可以将它们包含在你的应用程序包 (XAP) 中。
解决方案
为了演示如何做到这一点，我们将以一个从 Web 服务获取 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。 在我们的演示中，我们将把 jqueryMobile JS 和 CSS 文件包含在我们的 XAP 包中。
第一步是将你的文件添加到目录中，例如：HTML，并将“Build Action”（生成操作）设置为“Content”（内容）。
下一步是将从 WebService 接收到的 HTML 与我们的 HTML 主体连接起来。为此，我们将编写一个方法 BuildHTML。
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 和 JavaScript 使用 URL /html/... 进行引用。 这意味着 webbrowser 将从 isolatedstorage 加载文件，使用相对 URI。 不幸的是，将文件作为 Content 添加到解决方案并不能将它们添加到 IsolatedStorage 中。为此，我们将编写方法 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);
}
}
}
}
现在，你可以将这段代码添加到页面的开头
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 文件保存到 IsolatedStorage 的根文件夹中，与你的 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 控件将从 IsolatedStorage 加载 CSS、JS 和你的 HTML！ 你可以在 这里 找到源代码。