一步一步學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用作顯示資訊：

<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(string 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;    string 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。