- 首页>>>>HTML如何与silverlight进行交互
- 【返回】
HTML如何与silverlight进行交互
网址: 浏览次数:1802 发布日期:2011/10/27
网站关健词:HTML如何与silverlight进行交互
百度排名:
-
<P>HTML如何与silverlight进行交互<BR>现在SL3/4与HTML页面交互和以前相比已经变化了不少，参考了些资料，自行整理了一下。<BR>Silverlight与Html页面的交互功能是通过统称为HTML Bridge的一组类型和方法来实现的。要启用交互功能需要在创建Silverlight控件时指定enableHtmlAccess参数为true，否则很多方法的使用都会引发异常。<BR>在object标签式创建方法中为：<BR><param name="enableHtmlAccess" ＆#118alue="true" /><BR>Silverlight直接控制HTML在Silverlight中可以使用System.Windows.Browser命名空间中的类和方法来操作HTML，主要涉及以下几个类：<BR>BrowserInformation - 代表浏览器及客户端操作系统相关信息 <BR>HtmlDocument - 代表浏览器中的HTML文档 <BR>HtmlElement - 代表了一个HTML元素 <BR>HtmlPage - 提供了操作DOM的方法 <BR>HtmlWindow - 代表＆#106avascript中的window <BR>其中，最重要的就是HtmlPage类，它提供了一组静态方法来获取其他类的实例，如：<BR>取得BrowserInformation: <BR>BrowserInformation browserInfo = HtmlPage.BrowserInformation; <BR>取得HtmlDocument: <BR>HtmlDocument htmlDocument = HtmlPage.Document; <BR>取得HtmlWindow: <BR>HtmlWindow htmlWindow = HtmlPage.Window; <BR>下面列举一些常用操作：<BR>在新窗口中打开网页： <BR>HtmlPage.Window.Navigate(new Uri("<A href="https://www.google.com">https://www.google.com</A>"), "__blank"); <BR>修改页面标题： <BR>HtmlPage.Document.SetProperty("title", "New Title"); <BR>修改、取得页面元素属性： <BR>HtmlElement elem = HtmlPage.Document.GetElementByID("elem1"); <BR>elem.SetAttribute("＆#118alue", "haha"); <BR>string ＆#118alue = elem.GetAttribute("＆#118alue"); <BR>注册HTML元素事件： <BR>elem.AttachEvent("＆#111nclick", delegate(object sender, HtmlEventArgs he) <BR>{ <BR> // ... <BR>}); <BR>＆#106avascript中调用Silverlight方法/属性要从＆#106avascript中调用Silverlight方法，Silverlight必须首先注册ScriptableObject。这可以通过给要暴露给js的类型加上ScriptableTypeAttribute，这样就会暴露该类型的所有属性、方法和事件；如果只要暴露一部分成员，也可以仅给这一部分成员标记ScriptableMemberAttribute（在过去的版本中仅有ScriptableAttribute）。这个标记是非常宽松的，只要类中有成员是Scriptable的，就可以使用HtmlPage.RegisterScriptableObject方法来注册这个类使其能被js访问。比如：<BR>public partial class MainPage : UserControl<BR>{<BR> public MainPage()<BR> {<BR> InitializeComponent();<BR> HtmlPage.RegisterScriptableObject("Page", this);<BR> }</P>
<P> [ScriptableMember]<BR> public string Process(string arg)<BR> {<BR> return "Called from ＆#106s: " + arg; }}在html页面则可以用如下js代码调用Process方法：<BR>function callSL() {<BR> var slHost = document.getElementById("SilverlightControl");<BR> var page = slHost.Content.Page;<BR> alert(page.Process('param from js'));<BR>}将callSL方法注册到按钮的＆#111nclick上：<BR><input type="button" ＆#118alue="Call SL" ＆#111nclick="callSL()" /><BR>点击运行结果如下：</P>
<P>Silverlight属性的调用方法同理。<BR>（附带一提，这里的"SilverlightControl"是Silverlight控件的id，即Silverlight的object标签id。）<BR>＆#106avascript注册Silverlight中的事件无参数事件Silverlight中，事件用ScriptableMemberAttribute标记或者包含事件的类用ScriptableTypeAttribute标记后，再用HtmlPage.RegisterScriptableObject注册该类，在＆#106avascript中就可以访问该事件。比如Silverlight暴露如下事件：<BR>public event EventHandler Butt＆#111nClicked;那么在js中可以用下面的代码注册该事件：<BR>function onSilverlightLoad() {<BR> var slHost = document.getElementById("SilverlightControl");<BR> var page = slHost.Content.Page;<BR> page.Butt＆#111nClicked = function () {<BR> alert("Button clicked in SL.");<BR> };}那么当用户点击Silverlight中的按钮时，就会执行注册的js代码：</P>
<P>值得注意的是，这段js并不能放在页面的onload事件中执行，因为那时Silverlight控件可能还没加载完成，应该放在Silverlight控件的onload事件中。在Silverlight的标签中添加onLoad参数：<BR><param name="onLoad" ＆#118alue="onSilverlightLoad" />带参数事件然后是如何传递事件参数的问题，网上许多人说指定自定义参数时，在js中无法获取，提示不支持指定的方法或属性，其实只要将EventArgs类本身也指定为ScriptableType即可（当然也可将成员指定为ScriptableMember）。示例如下。<BR>事件参数类：<BR>[ScriptableType]<BR>public class Butt＆#111nClickedEventArgs : EventArgs<BR>{<BR> public string Message { get; set; }<BR>}MainPage类：<BR>public partial class MainPage : UserControl<BR>{ …<BR> private void Button_Click(object sender, System.Windows.RoutedEventArgs e)<BR> { // 引发Butt＆#111nClicked事件并传入事件参数<BR> OnButt＆#111nClicked(new Butt＆#111nClickedEventArgs() { Message = "Message from SL." });<BR> }</P>
<P> #region [Butt＆#111nClicked Event]</P>
<P> [ScriptableMember]<BR> public event EventHandler<Butt＆#111nClickedEventArgs> Butt＆#111nClicked;</P>
<P> [System.Diagnostics.DebuggerStepThrough]<BR> protected virtual void OnButt＆#111nClicked(Butt＆#111nClickedEventArgs e)<BR> {<BR> if(null != Butt＆#111nClicked)<BR> {<BR> Butt＆#111nClicked(this, e);<BR> }<BR> }</P>
<P> #endregion<BR>}将js的事件处理函数改成：<BR>page.Butt＆#111nClicked = function (sender, args) {<BR> alert(args.Message);<BR>};如此，当点击SL中按钮时结果如下：</P>
<P>可见event args被成功传递了出来。<BR>Under the Hood至此基本已满足一般使用的需要了。其实不论是从js调用Silverlight方法/属性，或者注册Silverlight事件，其本质问题都是如何将托管对象传给＆#106avascript，这里面就有一个对象marshal的问题。Marshal遵循以下原则：<BR>托管类型通过传递引用的方式传给＆#106avascript <BR>＆#106avascript类型要传入Silverlight，必须要先进行一层托管的封装 <BR>如果将托管类型marshal到＆#106avascript过程发生错误，抛出InvalidOperationException <BR>如果将＆#106avascript数据marshal入Silverlight时发生错误，＆#106avascript调用者将得到一个异常，异常文本描述了发生的错误 <BR>基本类型（即所谓的Primitive types）以下类型属于基本类型，即不需要标记ScriptableTypeAttribute或者ScriptableMemberAttribute而可以直接在Silverlight和js之间传递的类型：<BR> <BR>Silverlight ＆#106avascript <BR>String 字符串 <BR>null null <BR>Boolean Boolean <BR>DateTime Date <BR>Char 单字符的字符串 <BR>数字类型 Double（来回转换可能引发精度及溢出问题） <BR>枚举 数字 <BR>Guid 格式化的字符串 <BR> <BR>除此之外，基本的C#数组或者实现了IList接口的类型，可以直接转换为＆#106avascript中的array；实现了IDictionary的类型也可以直接转为＆#106avascript中的dictionary。<BR>反过来，＆#106avascript中的数组传入Silverlight时，一般会被转为object[]；dictionary则被转为Dictionary<string, object>.<BR>复杂类型对于用户创建的复杂类型，则需要通过标记ScriptableTypeAttribute或者ScriptableMemberAttribute，使其能够正确地传递给＆#106avascript.<BR>对于Silverlight和＆#106avascript间的Marshal，以上依然只描述了各种最基本的情形。我也不想做那种照翻MSDN的事情，对于更加复杂的情形，以及各种注意事项<BR></P>
