稳扎稳打Silverlight(27) - 2.0网页之可脚本化, 与DOM的交互, 与JavaScript的交互

[索引页]
[源码下载]

稳扎稳打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 的交互  &nbsp;

         < 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
[源码下载]