AI导航网
微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

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

分类：Silverlight作者：编程之家
  [索引页]
[源码下载]

稳扎稳打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

        #silverlightControlHost

        

     </ style >


     < script  type ="text/javascript"  src ="../Silverlight.js" ></ script >


     < script  type ="text/javascript" >

        function scriptableDemo() {


            // scriptable - Silverlight 注册到客户端的对象

            var obj = document.getElementById("xaml1).content.scriptable;

             output 'result);


            output.innerHTML += obj.CurrentTime

            output.innerHTML  <br />;


            output.innerHTML  obj.Hello(webabcd);

            output.innerHTML ;


             obj.Start = responseStart;             addEventListener - 添加事件监听器 removeEventListener - 移除事件监听器            obj.addEventListener(Start, responseStart);

        }


         responseStart(sender, args) {

            document.getElementById().innerHTML  args.CurrentTime;

            document.getElementById(;

        }

     </ 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

     </ 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,255); orphans:2; widows:2">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

     </ style >


     < script  type ="text/javascript"  src ="../Silverlight.js" ></ script >


     < script  type ="text/javascript" >

         silverlightInvokeJS(name) {

             Silverlight 调用 JavaScript 方法，在页面上显示结果            document.getElementById(hello: + name 


         jsInvokeSilverlight(name)  JavaScript 调用 Silverlight 方法，在 Silverlight 上显示结果).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,255); orphans:2; widows:2">OK
[源码下载]

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。

相关推荐

c# – 如何在Silverlight 4中绑定ContextMenu的IsEnabled属性？
如何在Silverlight4(XAML)中绑定IsEnabled属性？我试过简单的IsEnabled=“{BindingABC}”,但这不起作用–MenuItem总是启用.提前感谢您的线索！干杯编辑：有趣的是,当设置Mode=TwoWay时,绑定似乎有效.但是,在菜单项上...
c# – 使用Silverlight / windows手机式控件设置我的.Net桌面应用程序GUI
我正在编写我的第一个vb.net应用程序(但我也会在这里标记c#,因为我确信即使是一个c#人也可以使用类似的.net实现来回答这个问题).我申请的简短说明：我的桌面应用程序将仅在win平台上运行,使用vb.net,它是一个简单的网...
c# – Silverlight：将服务调用和文件处理移动到后台线程
ProcessFile()是在UIThread上运行还是在单独的线程上运行.如果它在UIThread上,如何将文件请求和ProcessFile()移动到单独的线程？varxClient=newServiceReference1.Service1SoapClient();xClient.Retrieve_File_Compl...
c# – 如何从ASP.NET / Silverlight开发人员成为sharepoint开发人员？
我从同行那里听说,对sharepoint的了解对职业生涯有益.我们不在办公室使用sharepoint.所以不知道如何开始.这些是我的新手问题>学习共享点值得努力吗？>学习sharepoint的资源在哪里？>我是否应该考虑开发哪些...
c# – Windows Phone 8 – 将列表保存到IsolatedStorage
我正在尝试保存一个类我的类对象的集合.我收到一个错误说明：Thecollectiondatacontracttype‘System.Collections.Generic.Listcannotbedeserializedbecauseitdoesnothaveapublicparameterlessconstructor.Addingapu...
c# – 在XAML中使用绑定设置样式
我需要根据Silverlight中的某些配置值设置给定控件的Style.我想有可能从两种可用的样式(静态资源)中选择一个控件样式.我试图做一些像：<TextBoxStyle="{BindingABC}"/>哪里publicstringABC{get{retu...
Android设备上的Silverlight / Moonlight
我刚买了第一台Android设备,我喜欢它…我也很喜欢你可以创建自己的应用程序并随意分发它们.我已经阅读了一些关于Monodroid的内容,而且显然微软希望将Silverlight放在这些设备上,尽管没有太多关于它们的信息……但是M...
c# – 从silverlight应用程序访问SQL Server数据库
我们的ASP.NET网站允许用户执行各种查询,并根据从数据库查询的结果显示网络图(如UML图).目前,我们正在生成一个位图并显示它.但由于我们需要支持允许用户以交互方式显示/隐藏某些块的功能,因此我们计划使用Silverligh...
c# – 自定义Silverlight启动画面导致白屏死机
我正在开发一个Silverlight4应用程序,我已经创建了一个自定义的启动画面.乍一看,自定义启动画面运行良好–非常好.几天后,我开始注意到闪屏不再显示,屏幕仍然是空白.这似乎只发生在我打开多个指向同一个应用程序的IE选...
c# – 使用带偏移的RotateTransform问题旋转图像
这是我的XAML：<ImageVerticalAlignment="Center"HorizontalAlignment="Center"Source="{BindingInput,Converter={StaticResourceByteArrayToBitmapConverter}}"><Image.Ren...
    pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native