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

2021-11-03 21:36:00

作者：webabcd

介绍
Silverlight 2.0 使用c#开发可脚本化的代码，Silverlight与宿主页面的DOM之间的交互，Silverlight与宿主页面的JavaScript之间的交互
    ScriptableMemberAttribute - 需要脚本化的属性、方法、事件要标记为此
    HtmlPage.RegisterScriptableObject - 将可脚本化对象注册到客户端
    HtmlElement - 表示网页的文档对象模型 (DOM) 中的 HTML 元素
    HtmlWindow - 提供 JavaScript 的 window 对象的 Silverlight 端的托管表示形式

在线DEMO
http://webabcd.blog.51cto.com/1787395/342779

示例
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 的
稳扎稳打Silverlight(27) - 2.0网页之可脚本化, 与DOM的交互, 与JavaScript的交互

* 需要脚本化的属性、方法、事件要标记为 [ScriptableMember]
稳扎稳打Silverlight(27) - 2.0网页之可脚本化, 与DOM的交互, 与JavaScript的交互

* 如果类被标记为 [ScriptableType]，则意味着其属性、方法、事件都是ScriptableMemberAttribute
稳扎稳打Silverlight(27) - 2.0网页之可脚本化, 与DOM的交互, 与JavaScript的交互

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

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

3、Silverlight与网页的JavaScript之间的交互
JSDemo.xaml

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

本文转自webabcd 51CTO博客，原文链接：http://blog.51cto.com/webabcd/343915，如需转载请自行联系原作者

码农公寓

相关文章