[源码下载]
稳扎稳打Silverlight(27) - 2.0网页之可脚本化, 与DOM的交互, 与JavaScript的交互
作者： webabcd
介绍
Silverlight 2.0 使用c#开发可脚本化的代码，Silverlight与宿主页面的DOM之间的交互，Silverlight与宿主页面的JavaScript之间的交互
ScriptableMemberAttribute - 需要脚本化的属性、方法、事件要标记为此
HtmlPage.RegisterScriptableObject - 将可脚本化对象注册到客户端
HtmlElement - 表示网页的文档对象模型 (DOM) 中的 HTML 元素
HtmlWindow - 提供 JavaScript 的 window 对象的 Silverlight 端的托管表示形式
在线DEMO
http://www.cnblogs.com/webabcd/archive/2008/10/09/1307486.html
示例
1、Silverlight对可脚本化的支持
Scriptable.cs
using System;using System.Net;using System.Windows;using System.Windows.Controls;using System.Windows.Documents;using System.Windows.Ink;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Animation;using System.Windows.Shapes;using System.Windows.Browser;namespace Silverlight20.WebPage
{
/*
* 脚本化的类必须是 public 的 * 需要脚本化的属性、方法、事件要标记为 [ScriptableMember] * 如果类被标记为 [ScriptableType]，则意味着其属性、方法、事件都是ScriptableMemberAttribute
*/ /// <summary> /// 用于演示脚本化的类 /// </summary> // [ScriptableType] public class Scriptable { /// <summary> /// 当前服务端的时间 /// </summary> [ScriptableMember] public DateTime CurrentTime { get; set; } /// <summary> /// Hello 方法 /// </summary> /// <param name="name">名字</param> /// <returns></returns> [ScriptableMember] public string Hello(string name) { return string.Format("Hello: {0}", name); } /// <summary> /// 开始事件 /// </summary> [ScriptableMember] public event EventHandler<StartEventArgs> Start; /// <summary> /// 触发开始事件所调用的方法 /// </summary> /// <param name="dt"></param> public void OnStart(DateTime dt) { if (Start != null) { Start(this, new StartEventArgs() { CurrentTime = dt }); } } } /// <summary> /// 开始事件的 EventArgs /// </summary> public class StartEventArgs : EventArgs { /// <summary> /// 当前服务端的时间 /// </summary> [ScriptableMember] public DateTime CurrentTime { get; set; } }
}
ScriptableDemo.xaml.cs
using System;using System.Collections.Generic;using System.Linq;using System.Net;using System.Windows;using System.Windows.Controls;using System.Windows.Documents;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Animation;using System.Windows.Shapes;using System.Windows.Browser;namespace Silverlight20.WebPage{ public partial class ScriptableDemo : UserControl { System.Threading.Timer _timer; System.Threading.SynchronizationContext _syncContext; public ScriptableDemo() { InitializeComponent(); this.Loaded += new RoutedEventHandler(ScriptableDemo_Loaded); } void ScriptableDemo_Loaded(object sender, RoutedEventArgs e) { // UI 线程 _syncContext = System.Threading.SynchronizationContext.Current; Scriptable s = new Scriptable() { CurrentTime = DateTime.Now }; // 将 Scriptable 对象注册到客户端中，所对应的客户端的对象名为 scriptable HtmlPage.RegisterScriptableObject("scriptable", s); _timer = new System.Threading.Timer(MyTimerCallback, s, 0, 1000); } private void MyTimerCallback(object state) { Scriptable s = state as Scriptable; // 每秒调用一次 UI 线程上的指定的方法 _syncContext.Post(OnStart, s); } void OnStart(object state) { Scriptable s = state as Scriptable; // 调用 Scriptable 对象的 OnStart() 方法，以触发 Start 事件 s.OnStart(DateTime.Now); } }}
ScriptableDemo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Silverlight20</title> <style type="text/css"> html, body { height: 100%; overflow: auto; } body { padding: 0; margin: 0; } #silverlightControlHost { height: 100%; } </style> <script type="text/javascript" src="../Silverlight.js"></script> <script type="text/javascript"> function scriptableDemo() { // scriptable - Silverlight 注册到客户端的对象 var obj = document.getElementById("xaml1").content.scriptable; var output = document.getElementById('result'); output.innerHTML += obj.CurrentTime output.innerHTML += '<br />'; output.innerHTML += obj.Hello("webabcd"); output.innerHTML += '<br />'; // obj.Start = responseStart; // addEventListener - 添加事件监听器 // removeEventListener - 移除事件监听器 obj.addEventListener("Start", responseStart); } function responseStart(sender, args) { document.getElementById('result').innerHTML += args.CurrentTime; document.getElementById('result').innerHTML += '<br />'; } </script></head><body> <div style="font-size: 12px" id="result"> </div> <div style="font-size: 12px" onclick="scriptableDemo();"> 加载了 Silverlight20.WebPage.ScriptableDemo 后，单击这里以测试 Silverlight 对可脚本化的支持</div> <div id="silverlightControlHost"> <object id="xaml1" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"> <param name="source" value="../ClientBin/Silverlight20.xap" /> <param name="EnableHtmlAccess" value="true" /> </object> <iframe style='visibility: hidden; height: 0; width: 0; border: 0px'></iframe> </div></body></html>
2、Silverlight与网页的DOM之间的交互
DOMDemo.xaml
<UserControl x:Class="Silverlight20.WebPage.DOMDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <StackPanel HorizontalAlignment="Left" Margin="5"> <TextBox x:Name="txtMsg" /> </StackPanel></UserControl>
DOMDemo.xaml.cs
using System;using System.Collections.Generic;using System.Linq;using System.Net;using System.Windows;using System.Windows.Controls;using System.Windows.Documents;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Animation;using System.Windows.Shapes;using System.Windows.Browser;namespace Silverlight20.WebPage{ public partial class DOMDemo : UserControl { public DOMDemo() { InitializeComponent(); Demo(); } void Demo() { // 获取当前页面的 id 为 hello 的DOM，并设置其样式 HtmlElement container = HtmlPage.Document.GetElementById("hello"); container.SetStyleAttribute("display", "block"); // 创建一个 ul HtmlElement ul = HtmlPage.Document.CreateElement("ul"); for (int i = 0; i < 10; i++) { // 创建一个 li ，并设置其显示的内容 HtmlElement li = HtmlPage.Document.CreateElement("li"); li.SetAttribute("innerText", "hi: DOM"); // 将 li 添加到 ul 内 ul.AppendChild(li); } // 将 ul 添加到 id 为 hello 的 DOM 内 container.AppendChild(ul); // 创建一个页面的 button ，并设置其 value 属性和 onclick 事件 HtmlElement button = HtmlPage.Document.CreateElement("button"); button.SetProperty("value", "hi: Silverlight"); button.AttachEvent("onclick", new EventHandler<HtmlEventArgs>(HelloClick)); // 将 button 添加到 id 为 hello 的 DOM 内 container.AppendChild(button); } void HelloClick(object sender, HtmlEventArgs e) { // 页面的 button 单击后所需执行的逻辑 txtMsg.Text += "hi: Silverlight\r\n"; } }}
DOMDemo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Silverlight20</title> <style type="text/css"> html, body { height: 100%; overflow: auto; } body { padding: 0; margin: 0; } #silverlightControlHost { height: 100%; } </style> <script type="text/javascript" src="../Silverlight.js"></script></head><body> <!--由 Silverlight 控制此 id 为 hello 的 DOM--> <div style="font-size: 12px; display: none" id="hello"> </div> <div style="font-size: 12px"> 加载 Silverlight20.WebPage.DOMDemo 后，测试 Silverlight 和页面 DOM 的交互</div> <div id="silverlightControlHost"> <object id="xaml1" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"> <param name="source" value="../ClientBin/Silverlight20.xap" /> <param name="EnableHtmlAccess" value="true" /> </object> <iframe style='visibility: hidden; height: 0; width: 0; border: 0px'></iframe> </div></body></html>
3、Silverlight与网页的JavaScript之间的交互
JSDemo.xaml
<UserControl x:Class="Silverlight20.WebPage.JSDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <StackPanel HorizontalAlignment="Left" Margin="5"> <Button Margin="5" x:Name="invokeJS" Content="调用JavaScript" Click="invokeJS_Click" /> <TextBox Margin="5" x:Name="txtMsg" /> </StackPanel></UserControl>
JSDemo.xaml.cs
using System;using System.Collections.Generic;using System.Linq;using System.Net;using System.Windows;using System.Windows.Controls;using System.Windows.Documents;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Animation;using System.Windows.Shapes;using System.Windows.Browser;namespace Silverlight20.WebPage{ public partial class JSDemo : UserControl { public JSDemo() { InitializeComponent(); this.Loaded += new RoutedEventHandler(JSDemo_Loaded); } private void invokeJS_Click(object sender, RoutedEventArgs e) { // 调用页面的 JavaScript 方法 HtmlPage.Window.Invoke("silverlightInvokeJS", "webabcd"); // 执行任意 JavaScript 语句 HtmlPage.Window.Eval("silverlightInvokeJS('webabcd2')"); } void JSDemo_Loaded(object sender, RoutedEventArgs e) { HtmlPage.Document.GetElementById("btnHello").SetStyleAttribute("display", "inline"); // 将此对象注册到客户端中，所对应的客户端的对象名为 silverlightObject HtmlPage.RegisterScriptableObject("silverlightObject", this); } /// <summary> /// Hello 方法 /// 暴露给页面的方法，调用后在 Silverlight 中显示结果 /// </summary> /// <param name="name">名字</param> [ScriptableMember] // 脚本化此方法 public void hello(string name) { txtMsg.Text += string.Format("Hello: {0}\r\n", name); } }}
JSDemo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Silverlight20</title> <style type="text/css"> html, body { height: 100%; overflow: auto; } body { padding: 0; margin: 0; } #silverlightControlHost { height: 100%; } </style> <script type="text/javascript" src="../Silverlight.js"></script> <script type="text/javascript"> function silverlightInvokeJS(name) { // Silverlight 调用 JavaScript 方法，在页面上显示结果 document.getElementById('result').innerHTML += "hello: " + name + "<br />"; } function jsInvokeSilverlight(name) { // JavaScript 调用 Silverlight 方法，在 Silverlight 上显示结果 var obj = document.getElementById("xaml1").content.silverlightObject; obj.hello(name); } </script></head><body> <div style="font-size: 12px" id="result"> </div> <div style="font-size: 12px"> 加载 Silverlight20.WebPage.JSDemo 后，测试 Silverlight 和页面 JavaScript 的交互 <input type="button" id="btnHello" value="HelloSilverlight" onclick="jsInvokeSilverlight('webabcd')" style="display: none" /> </div> <div id="silverlightControlHost"> <object id="xaml1" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"> <param name="source" value="../ClientBin/Silverlight20.xap" /> <param name="EnableHtmlAccess" value="true" /> </object> <iframe style='visibility: hidden; height: 0; width: 0; border: 0px'></iframe> </div></body></html>
OK
[源码下载]