在WebBrowser控件中显示本地HTML

在开发应用程序时,经常需要从Web服务获取HTML片段,并在WebBrowser控件中显示。在这种情况下,不会从网络加载JS、CSS或图像,而是可以将它们包含在应用程序包(XAP)中。

为了演示如何做到这一点,将以一个示例为例,该示例将从Web服务获取HTML代码。示例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文件。

第一步是将文件添加到一个目录中,例如:HTML,并设置“构建操作”为“内容”。

接下来,将编写一个名为BuildHTML的方法,用于将从WebService接收到的HTML与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和JavaScript文件的引用使用了URL /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); } } } }

现在,可以在页面的开头添加此代码: 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");

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485