总结Silverlight与HTML页面交互基本方法(js调用Silverlight方法属性)

概述  本文和大家总结一下Silverlight与HTML页面交互基本方法，其中包含有js调用Silverlight的方法，挺不错哦。 Silverlight与Html页面的交互功能是通过统称为HTML Bridge的一组类型和方法来实现的。要启用交互功能需要在创建Silverlight控件时指定enableHtmlAccess参数为true，否则很多方法的使用都会引发异常。 在object标签式创建  

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

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

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

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

Silverlight直接控制HTML

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

BrowserInformation - 代表浏览器及客户端 *** 作系统相关信息 HtmlDocument - 代表浏览器中的HTML文档 HtmlElement - 代表了一个HTML元素 HtmlPage - 提供了 *** 作DOM的方法 HtmlWindow - 代表JavaScript中的window

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

取得browserinformation: 
@H_502_59@browserinformation browserInfo = @H_502_59@HTMLPage.browserinformation; 取得HTMLdocument: 
@H_502_59@HTMLdocument HTMLdocument = @H_502_59@HTMLPage.document; 取得HTMLWindow: 
@H_502_59@HTMLWindow HTMLWindow = @H_502_59@HTMLPage.Window;

下面列举一些常用 *** 作：

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

 

 

JavaScript中调用Silverlight方法/属性

要从JavaScript中调用Silverlight方法，Silverlight必须首先注册ScriptableObject。这可以通过给要暴露给Js的类型加上ScriptableTypeAttribute，这样就会暴露该类型的所有属性、方法和事件；如果只要暴露一部分成员，也可以仅给这一部分成员标记ScriptableMemberAttribute（在过去的版本中仅有ScriptableAttribute）。这个标记是非常宽松的，只要类中有成员是Scriptable的，就可以使用@H_502_59@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标记后，再用@H_502_59@HTMLPage.RegisterScriptableObject注册该类，在JavaScript中就可以访问该事件。比如Silverlight暴露如下事件：

public event @H_502_59@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。

总结

以上是内存溢出为你收集整理的总结Silverlight与HTML页面交互基本方法(js调用Silverlight方法/属性)全部内容，希望文章能够帮你解决总结Silverlight与HTML页面交互基本方法(js调用Silverlight方法/属性)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。