在 Silverlight 应用中集成动态 HTML 页面

• 下载 VB.NET 示例项目：HTMLTest2.zip  - 2 Mb

介绍  

本文介绍如何在 Silverlight 应用程序中集成动态创建的 HTML 页面，以及如何在两者之间传递信息。例如，我们将创建 2 个页面来编辑和显示邮件。你是否曾搜索过可以在 Silverlight 中使用的免费 WYSIWYG HTML 编辑器？如果搜索过，你会知道：有 2 到 3 个免费的 RTF 用户控件，它们不生成 HTML 代码；一些开发工具则要价 400 美元以上！

不要再搜索了——这里有一个免费的解决方案，教你如何将 CKEditor（或其他任何免费 HTML 编辑器）集成到你的 Silverlight 应用程序中。

背景

在我开始这个项目时，我对 Silverlight 如何与 HTML 交互的概念完全是错误的。在网上找到的所有示例（而且只有少数几个）中，我都在寻找那行指定我想显示的网页 URL 的代码……哈哈！

实际上，Silverlight 只能访问一个 HTML（或 ASP）页面——那就是 Silverlight 解决方案在 Visual Studio 中自动创建的默认 HTML 或 ASPX 页面。所以你所要做的就是：用你自己的代码来增强这些页面。使用哪个页面取决于你域名主机上运行应用程序的 web.config 文件（默认页面）。如果你不确定，只需保持两个页面的内容相同。

使用代码 

让我们从这些默认页面开始——在本例中，我将展示 HTML 版本，但用 ASP 页面（包含在示例项目中）做同样的事情也很简单。首先，我们必须在 body 标签中插入两个参数：

<param name="windowless" value="true" /> 
<param name="onLoad" value="pluginLoaded" />    

第一个参数将确保 HTML 内容可见（否则所有 HTML 内容都将隐藏在你的 Silverlight 表面后面）。第二个参数将在 Silverlight 应用程序加载时触发一个事件到 HTML 页面（JavaScript 函数将处理此事件——见下文）。

接下来，我们需要在页面中一个不可见的 div 元素，它将作为我们想要显示的动态 HTML 内容的容器。为此，我们将在 silverlightControlHost 的 div 下方添加以下行：

<div id="HTMLContentArea" style="position: absolute; display:none;"></div>    

确保将 div 添加到 silverlightControlHost 的外面——否则动态 HTML 内容只会显示在 IE 兼容模式下！

我们还必须在页面的 script 区域包含一些 JavaScript 函数，以响应按钮点击并与 Silverlight 应用程序进行交互。我认为大家都能理解这些函数，所以我不会详细解释——只说一点：大多数函数都引用将在运行时插入到我们不可见的 div 容器中的 HTML 元素，所以不用担心。你可以根据你可能添加到自己解决方案中的其他动态内容来调整这些函数。

最后，我们必须添加一个对 CKEditor 附带的 JavaScript 文件的引用，这样 HTML 部分就完成了。

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>   

（请参阅示例项目中的完整 HTML 页面）

Silverlight 部分

这一步将引导你完成所有必要的代码，以显示和隐藏任何 HTML 内容，以及如何与我们在 Silverlight 解决方案的 HTML 页面中放置的 JavaScript 函数进行交互。

首先，我们必须向项目添加一个新类，它将作为 HTML 的接口。所有从 HTML 页面中的 JavaScript 函数调用的函数都必须以...作为前缀

<ScriptableMember()> _  

该类还需要两个公共属性来存储浏览器中可用显示区域的宽度和高度，以便稍后调整动态 HTML 内容的大小（这些属性将在运行时从 Silverlight 应用程序的 MainPage 的 Load 事件中设置，以反映当前尺寸）；

Public HTMLWidth As Double = 0
Public HTMLHeight As Double = 0

两个公共函数（Show_MailEditor 和 Show_MailViewer）将允许从 Silverlight 代码的任何位置显示邮件编辑器或查看器。Show_MailViewer 将接受两个参数（主题和正文）以在邮件查看器中显示。两个函数都将首先创建动态 HTML 内容，将其插入到项目 HTML 页面的不可见 div 中，调整元素大小以适应可用显示区域，最后使 div 可见（这会导致 HTML 页面覆盖浏览器中的 Silverlight 表面。因为 CKEditor 是在运行时加载的，它需要几毫秒来替换指定的 textarea 元素，所以我们需要一个计时器来执行短暂延迟，然后再调整编辑器大小。最后，我们必须显式地将焦点设置到我们动态 HTML 内容中的一个元素上——否则输入元素只在第一次调用时工作，而在任何后续调用显示 HTML 页面时都会被冻结（别问我为什么……但它就是这样工作的！）。

为了使这个接口可以从所有代码位置访问，请在全局模块中创建实例，如下所示：

Module modGlobal
    'Make the interface available for global use from all project parts
    Public objMailInterface As MailInterface = Nothing
End Module

现在，我们必须为 Silverlight 应用程序注册脚本接口。在 App.xaml.vb 的 Application_Startup 过程中添加以下代码行：

objMailInterface = New MailInterface
HtmlPage.RegisterScriptableObject("MailInterface", objMailInterface)

如前所述，应用程序必须在运行时将可用浏览器显示区域信号传递给接口。要解决此问题，请在 MainPage.xaml.vb 的 MainPage_SizeChanged 事件中添加以下代码：

objMailInterface.HTMLHeight = Me.ActualHeight
objMailInterface.HTMLWidth = Me.ActualWidth

现在，我们可以从代码中的任何位置调用我们的 HTML 页面之一了。

objMailInterface.Show_MailEditor()
//or
objMailInterface.Show_MailViewer("Mail Demo", "<p>Hello World!</p><p>This is a test text...</p>")

感谢 Hiren Khirsaria 的精彩 文章，关于 Silverlight 和 JavaScript 之间的通信！

要观看代码的实际效果，请下载上面的示例项目，并随意修改它——尽情享受吧！