从 JavaScript 调用 Silverlight 方法，并从 Silverlight 调用 JavaScript 函数

• 下载源代码 - 39.95 KB

引言

在使用 Silverlight 时，我们是在使用托管代码（C#、VB）。有时，我们需要从托管代码回调到 HTML 页面。

在本文中，我们将演示如何从 JavaScript 调用托管代码以及如何从托管代码调用 JavaScript 函数。

背景

要从 Silverlight 调用 JavaScript 函数，使用 System.Windows.Browser 命名空间的 HtmlPage 类来允许用户访问和操作浏览器 DOM（文档对象模型）。

ScriptableMemberAtrribute 类指示方法或属性可以被 JavaScript 调用者访问。

为了允许用户从 JavaScript 访问 Silverlight 的方法，您必须将 [ScriptableMember] 属性设置到该方法。

Using the Code

让我们一步一步地开始，包括源代码来演示 JavaScript 和 Silverlight 之间的通信。

首先，我们从从 Silverlight 调用 JavaScript 函数开始。

步骤 1：首先，在 Silverlight 项目中创建一个类，该类描述要从 JavaScript 调用的方法。

ScriptableClass.cs

public class ScriptableClass
    {
        [ScriptableMember]
        public void ShowAlertPopup(string message)
        {
            MessageBox.Show(message, "Message From JavaScript", MessageBoxButton.OK);
        }
    } 

上面的类包含一个带参数的方法。此方法是 Scriptable 属性类型，它提供从 JavaScript 调用的访问权限。

步骤 2：在 App.xaml.cs 文件中，注册可脚本化对象。

App.xaml.cs

 private void Application_Startup(object sender, StartupEventArgs e)
        {
            this.RootVisual = new MainPage();
            ScriptableClass myScript = new ScriptableClass();
            HtmlPage.RegisterScriptableObject("SL2JS", myScript);
        } 

在 application_startup 事件中，我们需要使用 RegisterScriptableObject 方法注册可脚本化类。

此 HtmlPage.RegisterScriptableObject 注册托管对象以供 JavaScript 代码访问。

步骤 3：在用户控件中，创建一个按钮来调用 JavaScript 函数。

MainPage.xaml

<Button x:Name="CallingButton"
                    Content="Call JavaScript Method From Silverlight"
                    Height="25"
                    Click="CallingButton_Click"></Button>

MainPage.xaml.cs

 private void CallingButton_Click(object sender, RoutedEventArgs e)
        {
            System.Windows.Browser.HtmlPage.Window.Invoke
        ("DisplayAlertMessage", "From Silverlight");
        }

通过单击按钮，我们需要使用 System.Windows.Browser.HtmlPage.Window.Invoke 方法调用 JavaScript 函数。

此方法将调用 JavaScript 的 "DisplayAlertMessage" 方法，并将 "From Silverlight" 作为传递的参数。

在下一步中，在 Web 项目的 HTML 页面中编写方法，该方法将 XAP 文件作为 Object 参数。

步骤 4：切换到 Web 项目并打开 HTML 页面。

步骤 5：在 HTML 页面中创建从 Silverlight 调用的方法。

  <script type="text/javascript">
        
        //From Silverlight
        function DisplayAlertMessage(param1) {
            alert("your are invoke method of javascript \n" + param1);
        }
       
    </script> 

现在我们继续从 HTML 页面调用 Silverlight 方法。

现在我们继续从 HTML 页面调用 Silverlight 方法。

步骤 1：在 Web 项目的 HTML 页面中创建一个按钮。

Silverlight2JSViseVersaTestPage.html

<div>
        <div style="width: 250px; background: lightblue; font-weight: bold;height:30px">
            HTML Part
        </div>
        <div>
            <input type="button" value="Calling Silverlight Method From Javascript" 
        onclick="CallSilverlight();" /></div>
    </div>

步骤 2：使用 param 在对象加载时创建 Silverlight 应用程序的对象。

 <object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
            width="100%" height="80%">
            <param name="source" value="ClientBin/Silverlight2JSViseVersa.xap" />
            <param name="onError" value="onSilverlightError" />
            <param name="background" value="white" />
            <param name="minRuntimeVersion" value="4.0.50826.0" />
            <param name="autoUpgrade" value="true" />         
                    <param name="onLoad" value="pluginLoaded" />

            <a href=http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0 
        style="text-decoration: none">
                <img src=http://go.microsoft.com/fwlink/?LinkId=161376 
        alt="Get Microsoft Silverlight"
                    style="border-style: none" />
            </a>
        </object> 

在上面的源代码中，我们创建了一个参数，我们调用了一个方法以在对象加载 Silverlight 应用程序时创建 XAP 对象。

步骤 3：编写函数 "pluginLoaded" 以创建宿主应用程序变量。

 <script type="text/javascript">       
        //calling Silverlight method
        var slCtl = null;
        function pluginLoaded(sender, args) {
            slCtl = sender.getHost();
        }
      
    </script> 

此代码描述了获取托管的 Silverlight 应用程序对象的方法。使用此对象，我们将调用 Silverlight 方法。

步骤 4：创建调用 Silverlight 方法的 JavaScript 函数 "CallSilverlight"。

 <script type="text/javascript">     
        //calling Silverlight method
        var slCtl = null;
        function pluginLoaded(sender, args) {
            slCtl = sender.getHost();
        }
        function CallSilverlight() {
            slCtl.Content.SL2JS.ShowAlertPopup
        ("Testing for Calling Silverlight Method\n From Javascript");
        } 
    </script>

在上面的代码中，CallSilverlight 函数将使用托管对象 (slCtl) 调用 Silverlight 可脚本化成员方法。

结论

这只是一个简单的演示示例，您也可以从 JavaScript 使用 Silverlight 属性以及从 Silverlight 使用 JavaScript 成员。