Silverlight与浏览器互操作

SilverLight运行库内置了一个与浏览器互操作的层，它允许使用C#等托管代码访问文档对象模型，页面中的JavaScript代码页可以访问XAML内容，甚至还可以修改它，页面的JS代码可以调用托管代码的函数，而托管代码也可以注册客户端页面事件。 
C#里面所有类都派生自Object，在SilverLight里，由ScriptObject来提供所有访问文档对象模型的类型的核心行为，这个对象又HtmlObject类来表示，也就是说，所有访问文档对象模型的父类是HtmlObject类，这些类包括HtmlDocument,HtmlWindow,HtmlPage,HtmlElement。它们都定义在 运行库的System.Windows.Brower命名空间下，在托管代码里，直接可以使用HtmlPage类，而其他3个类则可以通过HtmlPage类的静态属性获得

 

2.认识Silverlight中的HtmlDocument类

HtmlDocument类的原型： 
public sealed class HtmlDocument:HtmlObject
{
public HtmlElement Body{get;}
public string Cookies{get;set;}
public HtmlElement DocumentElement{get;}
public bool IsReady{get;}
public IDictionary<string,string> QueryString {get;}
public Uri DocumentUri {get;}
} 
Body:获取对HTML文档里的BODY元素的引用 
Cookies:获取或设置浏览器Cookies集合 
DocumentElement:获取对浏览器Document元素的引用 
DocumentUri:获取SL插件所在HTML页面的URI
QueryString:获取URI上的查询字符串 
IsReady:获取HTML页面是否已经完全加载

 

3.认识Silverlight中的HtmlElement类

HtmlDocument类的原型： 
public sealed class HtmlDocument:HtmlObject
{
public ScriptObjectCollection Children{get;}
public string CssClass{get;set;}
public HtmlElement Parent{get;}
public String Id {get;set;}
public String TagName{get;}
} 
Children:获取HTML元素的子元素集合 
CssClass:获取或设置CSS类字符串 
Id:获取HTML元素的标示符 
Parent:获取HTML元素父级的引用 
TagName:获取当前HTML元素的标记名称 

4.Silverlight访问DOM元素

除了在上面列出的HtmlDocument类和HtmlElement类的属性外，它们还提供了许多访方法，这些方法用来在Silverlight中访问DOM元素： 
（1）.HtmlDocument类的方法 
GetElementByTagName();依据标记名超找元素 
GetElementById();依据Id查找元素 
CreateElement();创建新元素 
RemoveChild();移除元素 
（2）.HtmlElement类的方法： 
GetAttribute();获取元素属性 
SetAttribute();设置元素属性 
AppendChild();追加一个子元素到末尾 
SetStyleAttribute()：设置元素样式

5.Silverlight读写Cookies

（1）.通过HtmlDocument对象的SetProperty方法可以写入Cookie
DateTime ts = DateTime.Now + TimeSpan.FromDays(7);
String cookie = "userid=tom;expires=" + ts.ToString();
HtmlPage.Document.SetProperty("cookie", cookie);
（2）.通过HtmlDocument对象的GetProperty方法可以获取某个关键字的Cookie字符串 
（3）.通过HtmlDocument对象的Cookies集合属性能够获取所有的Cookies

 

6.Silverlight托管代码调用javaScript

调用JavaScript代码全部使用HtmlWindow类的方法，其中有四种方式供选择： 
（1）.直接调用HtmlWindow对象内置的Alert和Confirm方法 
（2）.使用HtmlWindow对象的GetProperty方法来获取一个ScriptObject，然后调用此对象的Invoke方法和InvokeSelf方法 
（3）.使用HtmlWindow对象的CreateInstance方法来获取一个ScriptObject，然后调用此对象的Invoke方法和InvokeSelf方法 
（4）.使用HtmlWindow对象的Eval方法来执行一段js脚本 
以GetProperty方法为例说明： 
步骤：

1. 在WEB页面(HTML或ASPX)编写JS代码
2. 如果方法需要参数，在SL里可以通过界面传递参数给JS方法
3. 调用HtmlDocument的GetProperty方法返回一个ScriptObject对象
4. 使用ScriptObject的方法InvokeSelf来执行，并将参数传递给JS方法

7.Silverlight托管代码调用json数据

步骤： 
（1）.在托管代码里创建一个与JSON格式对应的实体类 
（2）.使用HtmlWindow的GetProperty或Invoke方法或InvokeSelf方法获得一个ScriptObject对象 
（3）.使用ScriptObject对象的ConvertTo<T>方法将JSON格式转换为托管代码的实体类型 
ScriptObject script=HtmlPage.Window.Invoke("myjsonobject", null) as ScriptObject;
Person person = script.ConvertTo<Person>();

 

8.JavaScript调用托管代码

在Silverlight 2中提供了如下两个类型：

1. ScriptableMemberAttribute：允许我们在Silverlight把成员暴露给Script。
2. ScriptableTypeAttribute：允许我们在Silverlight把类型暴露给Script。

同时HtmlPage提供了RegisterCreateableType和RegisterScriptableObject方法，用来注册可被脚本使用的类型或者对象实例。注册成功，就可以再JavaScript里调用C#代码了 
实现步骤： 
（1）. Silverlight控件加载时注册一个脚本可调用的当前页面实例 
（2）.编写托管代码方法，该方法将在JavaScript中被调用，必须为public，用ScriptableMember特性暴露给脚本 
（3）.编写JavaScript调用Silverlight中的方法，获取Silverlight插件，并且使用注册的实例来调用托管代码 
附： 
HtmlPage类的几个静态方法原型： 
Public static void RegisterScriptableObject(string scriptKey,object instance)
Public static void UnregisterScriptableObject(sring scriptKey)
Public static voidRegisterCreateableType(string scriptAlias,Type type)
Public static void UnregisterCreateableType(string scriptAlias)

9.使用托管代码处理DOM元素事件

使用托管代码处理DOM元素事件也依赖于HtmlObject对象，HtmlObject类有四个方法，定义如下： 
Public abstract class HtmlObject:ScriptObject
{
public bool AttachEvaent(string eventName,EventHandle<HtmlEventArgs> handler);
public bool AttachEvaent(string eventName,EventHandle handler);
public bool DetachEvaent(string eventName,EventHandle<HtmlEventArgs> handler);
public bool DetachEvaent(string eventName,EventHandle handler);
}
使用HtmlObject方法来实现注册和移出事件注册：

1. 1. 使用AttachEvent注册事件：事件名和处理函数同时提供
   2. 使用DetachEvent移除注册的事件

HtmlElement继承自HtmlObject,所以也具有这些方法 
示例： 
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
HtmlElement element = HtmlPage.Document.GetElementById("div1");
element.AttachEvent("onmousemove", OnClick);
}

void OnClick(object sender, HtmlEventArgs e)
{
tbDisplay.Text=e.ScreenX + "," + e.ScreenX + "事件源是:" + e.Source.ToString();
}