【李会军】一步一步学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基础知识、数据与通信、自定义控件、动画、图形图像等几个方面带您快速进入Silverlight 2开发。

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

使用GetProperty获取脚本对象

先来看一个简单的例子，在Silverlight测试页面中放入一个div用作显示信息：

<divid="result"></div>

编写一段简单的JavaScript代码：

<script.type="text/javascript">
;f4K%E$H]
I }	FV|0functionHello(message)
v@CJ;SS_m$w3b$r0{ITPUB个人空间*w,x5[C-X
varresultSpan = $get("result");
-I(t2_%\,r{h0resultSpan.innerText ="Hello "+ message;
$w0G/Mzf[5O	_0}ITPUB个人空间%\2nO!L!a
</script>

再编写一个简单的输入信息界面：

<StackPanelBackground="#CDFCAE"Orientation="Vertical">ITPUB个人空间
D$YP){r,r
p
<StackPanelHeight="40">
w+Dp3Q	~h(F0<TextBlockText="Calling Browser Script. from Silverlight"
X`)O2y7bmd*h#`?0Foreground="Red"></TextBlock>

vz$_)A'Fn#T0</StackPanel>ITPUB个人空间F1DP
jP"[O m"W8S['g#k
<StackPanelOrientation="Horizontal">ITPUB个人空间3S'~%HdZC$H
<TextBoxx:Name="input"Width="340"Height="40"Margin="20 0 20 0"></TextBox>ITPUB个人空间w2h7k Ty
<Buttonx:Name="submit"Width="120"Height="40"Background="Red"
;qbK}
T0Content="调 用"FontSize="20"Foreground="Red"Click="submit_Click"></Button>ITPUB个人空间1_ID
E7O:Y3eT
</StackPanel>
$ta&Sr"Dk0</StackPanel>

实现对脚本的调用：

private voidsubmit_Click(objectsender,RoutedEventArgse)
x-I7r7L&e,pN0{ITPUB个人空间j#G%yIa
ScriptObjecthello =HtmlPage.Window.GetProperty("Hello")asScriptObject;
8L
JOf|Jss1B0hello.InvokeSelf(this.input.Text);
#vl9tl%O'R0}

ScriptObject提供了任何客户端脚 本的封装，不仅仅是JavaScript，使用其他的AJAX框架也可以，如jQuery等。然后调用InvokeSelf()方法，传入参数，这里 ScriptObject总共提供了两个方法，Invoke和InvokeSelf，如果我们只调用脚本对象的自身，就可以使用InvokeSelf，如 果脚本对象中还有其它的函数等，可以使用Invoke传入名称进行调用，两个方法的定义如下：

[SecuritySafeCritical]ITPUB个人空间;`["zlm	V4bBo)U
public virtual objectInvoke(stringname,params object[] args);ITPUB个人空间z[V6u,c+\#F
F:KQ

pmu*a
L	f
\L ^0[SecuritySafeCritical]ITPUB个人空间"cTp;B)S
public virtual objectInvokeSelf(params object[] args);

运行上面的示例：ITPUB个人空间1yrj
w@0A

'p8YKVRw3JN0输入TerryLee后点击调用，可以看到确实调用了客户端脚本：

{Sdr.y}j f0m0ITPUB个人空间8R9U4{V3T3v+Brv

使用CreateInstance创建脚本对象

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

<script.type="text/javascript">ITPUB个人空间*cY'e*yV;zy
myHello =function(message)ITPUB个人空间G-itzx
{
$S9{v!tE:@j
`#A-u0this.Message = message;
)C.p4f
hJ,A
A?V0}ITPUB个人空间y1RgdkR_q/A
myHello.prototype.Display =function()
r)xM*Y/I,W%U6goz
U0{ITPUB个人空间AA!koys&H S
varresultSpan = $get("result");
&U4~RYGA]0resultSpan.innerText ="Hello "+this.Message;ITPUB个人空间(kX2S!L[s3Q
}
9zrG3Tr@8C1^A-O0</script>

使用HtmlPage.Window.CreateInstance创建脚本对象

private voidsubmit_Click(objectsender,RoutedEventArgse)ITPUB个人空间&LZIE%}+CF"p
{ITPUB个人空间0KStC
|.o
ScriptObjectscript. =HtmlPage.Window.CreateInstance("myHello",this.input.Text);ITPUB个人空间#K
},y,yTI#pd
ITPUB个人空间+^:y9\j
Dv
k
O}$@"rK
objectresult = script.Invoke("Display");

r
NLvMI0}

运行后的效果跟上面的示例是一样的，如：
,\-fiE(RZ-]g0
j*G)Qlug?3yG~0输入文本信息后：ITPUB个人空间4XxQEl)Sn#L

2mC@v
_;L2rd0

使用HtmlPage.Window.Eval()

最后还有一种机制，就是使用HtmlPage.Window.Eval()方法，只要我们给该方法传入一段字符串，它都会作为JavaScript来执行。做一个简单的测试，我们再修改一下上面的示例代码：

private voidsubmit_Click(objectsender,RoutedEventArgse)
h%NqE(aC0{
&Luv[+{0HtmlPage.Window.Eval(this.input.Text);ITPUB个人空间r
O[.SN}
}

运行后我们在文本框中输入一段脚本alert('TerryLee');，效果如下所示：

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

private voidsubmit_Click(objectsender,RoutedEventArgse)
6m$v-izt
c7u1`)B0{ITPUB个人空间+bh5P
n9t[*u
HtmlElementresult =HtmlPage.Window.Eval("document.getElementById('result')")asHtmlElement;ITPUB个人空间&B0[\(iIW[
ITPUB个人空间`'?5lR-n
stringmessage = result.GetAttribute("innerHTML");ITPUB个人空间l&Ao
d\4Ov'w
HtmlPage.Window.Alert(message);
n7Hkd/B/l0}

运行后效果如下，获取的result确实就是我们定义的div。
~ R,md| q0ITPUB个人空间m&M4D-NGT/i

对AJAX框架的支持

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

<script.type="text/javascript">
!T"K*^_E0functionmyHello(message)ITPUB个人空间ZcpK-ff.L_"F
{ITPUB个人空间s%B Q%hV(J#c
$("#result").text("Hello "+ message);
#qU x8Yxb'dk0}
d"OR8`2w0zSR2T0</script>

调用脚本

private voidsubmit_Click(objectsender,RoutedEventArgse)

n'U!f/F:C!F0{ITPUB个人空间]3z2LV;L%r4P1E
ScriptObjectscript. =HtmlPage.Window.GetProperty("myHello")asScriptObject;
#HF'_/J\&~0
Y2v9C7V+d0script.InvokeSelf(this.input.Text);ITPUB个人空间Jhi[MCs"t%MuR
}

运行后的结果与前面的示例是一样的：
rg~rwA0
g5aDm ^"@E+QL0

结束语

本文介绍了在Silverlight中调用JavaScript的几种方法，下一篇我将介绍如何在JavaScript中调用Silverlight。

ITPUB个人空间!Q jy)EN)h