本文和大家总结一下Silverlight与HTML页面交互基本方法，其中包含有js调用Silverlight的方法，挺不错哦。

Silverlight与Html页面的交互功能是通过统称为​​HTML Bridge​​​的一组类型和方法来实现的。要启用交互功能需要在创建Silverlight控件时指定​​enableHtmlAccess​​参数为true，否则很多方法的使用都会引发异常。

在object标签式创建方法中为：

<param name="enableHtmlAccess" value="true" />

Silverlight直接控制HTML

在Silverlight中可以使用​​System.Windows.Browser​​命名空间中的类和方法来操作HTML，主要涉及以下几个类：

其中，最重要的就是HtmlPage类，它提供了一组静态方法来获取其他类的实例，如：


  • 取得BrowserInformation:
    BrowserInformation browserInfo = HtmlPage.BrowserInformation;
  • 取得HtmlDocument:
    HtmlDocument htmlDocument = HtmlPage.Document;
  • 取得HtmlWindow:
    HtmlWindow htmlWindow = HtmlPage.Window;

下面列举一些常用操作：


  • 在新窗口中打开网页：
    HtmlPage.Window.Navigate(new Uri("https://www.google.com"), "__blank");
  • 修改页面标题：
    HtmlPage.Document.SetProperty("title", "New Title");
  • 修改、取得页面元素属性：
    HtmlElement elem = HtmlPage.Document.GetElementByID("elem1");
    elem.SetAttribute("value", "haha");
    string value = elem.GetAttribute("value");
  • 注册HTML元素事件：
    elem.AttachEvent("onclick", delegate(object sender, HtmlEventArgs he)
    {
    // ...
    });

JavaScript中调用Silverlight方法/属性

要从JavaScript中调用Silverlight方法，Silverlight必须首先注册ScriptableObject。这可以通过给要暴露给js的类型加上​​ScriptableTypeAttribute​​，这样就会暴露该类型的所有属性、方法和事件；如果只要暴露一部分成员，也可以仅给这一部分成员标记​​ScriptableMemberAttribute​​（在过去的版本中仅有ScriptableAttribute）。这个标记是非常宽松的，只要类中有成员是Scriptable的，就可以使用HtmlPage.RegisterScriptableObject方法来注册这个类使其能被js访问。比如：


Code [http://www.xueit.com] 
public

      partial

      class
       MainPage : UserControl
{

      public
       MainPage()
    {
        InitializeComponent();
        HtmlPage.RegisterScriptableObject(
      "
      Page
      "
      , 
      this
      );
    }

    [ScriptableMember]

      public

      string
       Process(
      string
       arg)
    {

      return

      "
      Called from js: 
      "
         arg; 
   }
}


在html页面则可以用如下js代码调用Process方法：


Code [http://www.xueit.com] 
function callSL() {
    var slHost 
      =
       document.getElementById(
      "
      SilverlightControl
      "
      );
    var page 
      =
       slHost.Content.Page;
    alert(page.Process(
      '
      param from js
      '
      ));
}


将callSL方法注册到按钮的onclick上：

<input type="button" value="Call SL" onclick="callSL()" />

点击运行结果如下：

Silverlight属性的调用方法同理。


（附带一提，这里的"SilverlightControl"是Silverlight控件的id，即Silverlight的object标签id。）



JavaScript注册Silverlight中的事件

无参数事件

Silverlight中，事件用​​ScriptableMemberAttribute​​标记或者包含事件的类用​​ScriptableTypeAttribute​​标记后，再用HtmlPage.RegisterScriptableObject注册该类，在JavaScript中就可以访问该事件。比如Silverlight暴露如下事件：

public event EventHandler ButtonClicked;

那么在js中可以用下面的代码注册该事件：


Code [http://www.xueit.com] 
function onSilverlightLoad() {
    var slHost 
      =
       document.getElementById(
      "
      SilverlightControl
      "
      );
    var page 
      =
       slHost.Content.Page;
    page.ButtonClicked 
      =
       function () {
        alert(
      "
      Button clicked in SL.
      "
      );
    };}


那么当用户点击Silverlight中的按钮时，就会执行注册的js代码：

值得注意的是，这段js并不能放在页面的onload事件中执行，因为那时Silverlight控件可能还没加载完成，应该放在Silverlight控件的onload事件中。在Silverlight的标签中添加onLoad参数：

<param name="onLoad" value="onSilverlightLoad" />

带参数事件

然后是如何传递事件参数的问题，网上许多人说指定自定义参数时，在js中无法获取，提示不支持指定的方法或属性，其实只要将EventArgs类本身也指定为ScriptableType即可（当然也可将成员指定为ScriptableMember）。示例如下。

事件参数类：


Code [http://www.xueit.com] 
[ScriptableType]

      public

      class
       ButtonClickedEventArgs : EventArgs
{

      public

      string
       Message { 
      get
      ; 
      set
      ; }
}


MainPage类：


Code [http://www.xueit.com] 
public

      partial

      class
       MainPage : UserControl
{    …

      private

      void
       Button_Click(
      object
       sender, System.Windows.RoutedEventArgs e)
    {        
      //
       引发ButtonClicked事件并传入事件参数


              OnButtonClicked(
      new
       ButtonClickedEventArgs() { Message 
      =

      "
      Message from SL.
      "
       });
    }


      #region
       [ButtonClicked Event]


    [ScriptableMember]

      public

      event
       EventHandler
      <
      ButtonClickedEventArgs
      >
       ButtonClicked;

    [System.Diagnostics.DebuggerStepThrough]

      protected

      virtual

      void
       OnButtonClicked(ButtonClickedEventArgs e)
    {

      if
      (
      null

      !=
       ButtonClicked)
        {
            ButtonClicked(
      this
      , e);
        }
    }


      #endregion

}


将js的事件处理函数改成：

page.ButtonClicked = function (sender, args) {    alert(args.Message);};

如此，当点击SL中按钮时结果如下：

可见event args被成功传递了出来。

Under the Hood

至此基本已满足一般使用的需要了。其实不论是从js调用Silverlight方法/属性，或者注册Silverlight事件，其本质问题都是如何将托管对象传给JavaScript，这里面就有一个对象marshal的问题。Marshal遵循以下原则：


托管类型通过传递引用的方式传给JavaScript JavaScript类型要传入Silverlight，必须要先进行一层托管的封装 如果将托管类型marshal到JavaScript过程发生错误，抛出InvalidOperationException 如果将JavaScript数据marshal入Silverlight时发生错误，JavaScript调用者将得到一个异常，异常文本描述了发生的错误

基本类型（即所谓的Primitive types）

以下类型属于基本类型，即不需要标记ScriptableTypeAttribute或者ScriptableMemberAttribute而可以直接在Silverlight和js之间传递的类型：

​Silverlight​

​JavaScript​

String

字符串

null

null

Boolean

Boolean

DateTime

Date

Char

单字符的字符串

数字类型

Double（来回转换可能引发精度及溢出问题）

枚举

数字

Guid

格式化的字符串

除此之外，基本的C#数组或者实现了IList接口的类型，可以直接转换为JavaScript中的array；实现了IDictionary的类型也可以直接转为JavaScript中的dictionary。

反过来，JavaScript中的数组传入Silverlight时，一般会被转为object[]；dictionary则被转为Dictionary<string, object>.

复杂类型

对于用户创建的复杂类型，则需要通过标记ScriptableTypeAttribute或者ScriptableMemberAttribute，使其能够正确地传递给JavaScript.

对于Silverlight和JavaScript间的Marshal，以上依然只描述了各种最基本的情形。我也不想做那种照翻MSDN的事情，对于更加复杂的情形，以及各种注意事项，可自行参考​​Silverlight and JavaScript Marshaling​​。