一步一步学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 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用作显示信息：

@H_301_20@<div ID@H_301_20@="result"></div@H_301_20@>

编写一段简单的JavaScript代码：

@H_301_20@<script type@H_301_20@="text/JavaScript">    function Hello(message)    {        @H_301_20@var resultSpan = $get("result");        resultSpan.innerText = "Hello " + message;    }@H_301_20@</script@H_301_20@>

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

@H_301_20@<StackPanel Background@H_301_20@="#CdfcAE" OrIEntation@H_301_20@="Vertical">    <StackPanel Height@H_301_20@="40">        <TextBlock Text@H_301_20@="Calling browser Script from Silverlight"                   Foreground@H_301_20@="Red"></TextBlock@H_301_20@>    </StackPanel@H_301_20@>    <StackPanel OrIEntation@H_301_20@="Horizontal">        <TextBox x@H_301_20@:name@H_301_20@="input" WIDth@H_301_20@="340" Height@H_301_20@="40" margin@H_301_20@="20 0 20 0"></TextBox@H_301_20@>        <button x@H_301_20@:name@H_301_20@="submit" WIDth@H_301_20@="120" Height@H_301_20@="40" Background@H_301_20@="Red"            Content@H_301_20@="调 用" FontSize@H_301_20@="20" Foreground@H_301_20@="Red" Click@H_301_20@="submit_Click"></button@H_301_20@>    </StackPanel@H_301_20@></StackPanel@H_301_20@>

实现对脚本的调用：

@H_301_20@private voID submit_Click(@H_301_20@object sender,RoutedEventArgs e){    ScriptObject hello = HTMLPage.Window.GetProperty("Hello") @H_301_20@as ScriptObject;    hello.InvokeSelf(@H_301_20@this.input.Text);}

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

[SecuritySafeCritical]@H_301_20@public virtual object Invoke(@H_301_20@string name,@H_301_20@params object[] args);[SecuritySafeCritical]@H_301_20@public virtual object InvokeSelf(@H_301_20@params object[] args);

运行上面的示例：

 

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

 

使用CreateInstance创建脚本对象

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

@H_301_20@<script type@H_301_20@="text/JavaScript">    myHello = @H_301_20@function(message)    {        @H_301_20@this.Message = message;    }    myHello.prototype.display = @H_301_20@function()    {        @H_301_20@var resultSpan = $get("result");        resultSpan.innerText = "Hello " + @H_301_20@this.Message;    }@H_301_20@</script@H_301_20@>

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

@H_301_20@private voID submit_Click(@H_301_20@object sender,RoutedEventArgs e){    ScriptObject script = HTMLPage.Window.CreateInstance("myHello",@H_301_20@this.input.Text);    @H_301_20@object result = script.Invoke("display");}

运行后的效果跟上面的示例是一样的，如：

输入文本信息后：

 

使用HTMLPage.Window.Eval()

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

@H_301_20@private voID submit_Click(@H_301_20@object sender,RoutedEventArgs e){    HTMLPage.Window.Eval(@H_301_20@this.input.Text);}

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

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

@H_301_20@private voID submit_Click(@H_301_20@object sender,RoutedEventArgs e){    HTMLElement result = HTMLPage.Window.Eval("document.getElementByID('result')") @H_301_20@as HTMLElement;    @H_301_20@string message = result.GetAttribute("INNERHTML");    HTMLPage.Window.Alert(message);}

运行后效果如下，获取的result确实就是我们定义的div。

 

对AJAX框架的支持

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

@H_301_20@<script type@H_301_20@="text/JavaScript">    function myHello(message)    {        $("#result").text("Hello " + message);    }@H_301_20@</script@H_301_20@>

调用脚本

@H_301_20@private voID submit_Click(@H_301_20@object sender,RoutedEventArgs e){    ScriptObject script = HTMLPage.Window.GetProperty("myHello") @H_301_20@as ScriptObject;    script.InvokeSelf(@H_301_20@this.input.Text);}

运行后的结果与前面的示例是一样的：

 

结束语

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

总结

以上是内存溢出为你收集整理的一步一步学Silverlight 2系列（21）：如何在Silverlight中调用JavaScript全部内容，希望文章能够帮你解决一步一步学Silverlight 2系列（21）：如何在Silverlight中调用JavaScript所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。