silverlight:学Silverlight 2系列(21):如何在Silverlight中调用JavaScript

　　概述　　Silverlight 2 Beta 1版本发布了无论从Runtime还是Tools都给我们带来了很多惊喜如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython对JSON、Web Service、WCF以及Sockets支持等系列新特性步步学Silverlight 2系列文章将从Silverlight 2基础知识、数据和通信、自定义Control控件、动画、图形图像等几个方面带您快速进入Silverlight 2开发

　　Silverlight中内置了对于HTML、客户端脚本等支持很多情况下我们编写Web应用中用了些JavaScript或者AJAX框架我们希望能够在Silverlight某些脚本思路方法或者说在Silverlight中触发某个脚本执行这时就需要用到在Silverlight中JavaScript本文将简单介绍这内容

　　使用GetProperty获取脚本对象　　先来看个简单例子在Silverlight测试页面中放入个div用作显示信息:

<div id="result"></div>　　编写段简单JavaScript代码:

<script type="text/javascript">
　　function Hello(message)
　　{
　　　　var resultSpan = $get("result");
　　　　resultSpan.innerText = "Hello " + message;
　　}
</script>　　再编写个简单输入信息界面:

<StackPanel Background="#CDFCAE" Orientation="Vertical">
　　<StackPanel Height="40">
　　　　<TextBlock Text="Calling Browser Script from Silverlight"
　　　　　　　　　 Foreground="Red"></TextBlock>
　　</StackPanel>
　　<StackPanel Orientation="Horizontal">
　　　　<TextBox x:Name="input" Width="340" Height="40" Margin="20 0 20 0"></TextBox>
　　　　<Button x:Name="submit" Width="120" Height="40" Background="Red"
　　　　　　Content="调 用" FontSize="20" Foreground="Red" Click="submit_Click"></Button>
　　</StackPanel>
</StackPanel>　　实现对脚本:

private void submit_Click(object sender, RoutedEventArgs e)
{
　　ScriptObject hello = HtmlPage.Window.GetProperty("Hello") as ScriptObject;
　　hello.InvokeSelf(this.input.Text);
}　　ScriptObject提供了任何客户端脚本封装不仅仅是JavaScript使用其他AJAX框架也可以如jQuery等然后InvokeSelf思路方法传入参数这里ScriptObject总共提供了两个思路方法Invoke和InvokeSelf如果我们只脚本对象自身就可以使用InvokeSelf如果脚本对象中还有其它等可以使用Invoke传入名称进行两个思路方法定义如下:

[SecuritySafeCritical]
public virtual object Invoke( name, params object args);
[SecuritySafeCritical]
public virtual object InvokeSelf(params object args);　　运行上面举例:



　　输入TerryLee后点击可以看到确实了客户端脚本:

　

　　使用CreateInstance创建脚本对象　　除了使用上面所说使用HtmlPage.Window.GetProperty思路方法获取脚本对象的外还有种替代思路方法即使用HtmlPage.Window属性CreateInstance思路方法还是使用上面举例我们在测试页中加入如下段脚本使用prototype为myHello添加了显示功能:

<script type="text/javascript">
　　myHello = function(message)
　　{
　　　　this.Message = message;
　　}
　　myHello.prototype.Display = function
　　{
　　　　var resultSpan = $get("result");
　　　　resultSpan.innerText = "Hello " + this.Message;
　　}
</script>　　使用HtmlPage.Window.CreateInstance创建脚本对象

private void submit_Click(object sender, RoutedEventArgs e)
{
　　ScriptObject script = HtmlPage.Window.CreateInstance("myHello",this.input.Text);
　　object result = script.Invoke("Display");
}　　运行后效果跟上面举例是样如:



　　输入文本信息后:

　

　　使用HtmlPage.Window.Eval　　最后还有种机制就是使用HtmlPage.Window.Eval思路方法只要我们给该思路方法传入段串它都会作为JavaScript来执行做个简单测试我们再修改下上面举例代码:

private void submit_Click(object sender, RoutedEventArgs e)
{
　　HtmlPage.Window.Eval(this.input.Text);
}　　运行后我们在文本框中输入段脚本alert('TerryLee');效果如下所示:



　　既然HtmlPage.Window.Eval可以执行段脚本并且将执行结果以对象形式返回我们可以使用它来获取DOM元素如下面这段代码:

private void submit_Click(object sender, RoutedEventArgs e)
{
　　HtmlElement result = HtmlPage.Window.Eval("document.getElementById('result')") as HtmlElement;
　　 message = result.GetAttribute("innerHTML");
　　HtmlPage.Window.Alert(message);
}　　运行后效果如下获取result确实就是我们定义div

　

　　对AJAX框架支持　　前面说过ScriptObject不仅仅是对JavaScript封装也支持其它AJAX框架现在我们用jQuery来测试下编写小段代码:

<script type="text/javascript">
　　function myHello(message)
　　{
　　　　$("#result").text("Hello " + message);
　　}
</script>　　脚本

private void submit_Click(object sender, RoutedEventArgs e)
{
　　ScriptObject script = HtmlPage.Window.GetProperty("myHello") as ScriptObject;
　　script.InvokeSelf(this.input.Text);
}　　运行后结果和前面举例是样:



　

　　结束语　　本文介绍了在Silverlight中JavaScript几种思路方法下篇我将介绍如何在JavaScript中Silverlight

延伸阅读

• 2009-1-23-- silverlight:Silverlight 2中多语言支持实现(下)
• 2009-1-23-- silverlight:Silverlight专题(5)-Silverlight 2 RC0更新内容
• 2009-1-23-- silverlight应用:Silverlight专题(1)-构建第一个Silverlight应用程序
• 2009-1-23-- silverlight应用:使用Silverlight构建插件式应用程序( 5)
• 2009-1-23-- silverlight开发:SilverLight基本开发环境介绍
• 2009-1-23-- silverlight:在Silverlight中做单元测试
• 2009-2-12-- silverlight:Silverlight中做单元测试的思路方法
• 2009-1-23-- silverlight:Silverlight 2 手把手(的 4) 创建 Silverlight 2 Control控件
• 2009-1-23-- silverlight应用:学Silverlight 2系列(33):Silverlight 2应用Web Service两例
• 2009-1-23-- silverlight:学Silverlight 2系列(6):键盘事件处理