Silverlight调用Javascript

前言：Silverlight 2.0 Beta1 已经发布，加入了许多激动人心的新特性：WPF UI 框架、丰富的控件、丰富的网络支持、丰富的基础类库支持等。这是本人的学习笔记，写的比较乱，因此定名为乱弹琴 Silverlight 2.0 系列文章。

本篇介绍Silverlight调用Javascript。

与调用Script(包括Javascript)相关的类型：
System.Object
  System.Windows.Browser.ScriptObject
    System.Windows.Browser.HtmlObject
      System.Windows.Browser.HtmlDocument
      System.Windows.Browser.HtmlElement
      System.Windows.Browser.HtmlWindow
等等，HtmlWindow实现地最完善，主要介绍HtmlWindow。
文档中ScriptObject和HtmlObject的继承关系描述并不一致，用Reflector反射可以看出HtmlObject继承自ScriptObject。


说明部分文档有错误。
ScriptObject作为HtmlWindow、HtmlElement等第二父类出现的，则HtmlWindow、HtmlElement等可以调用父类的公共方法和保护方法。操作Javascript就方便多了。

用SL创建Javascript代码段

C#:
HtmlElement heScript = HtmlPage.Document.CreateElement("script");
heScript.SetAttribute("type", "text/javascript");
heScript.SetProperty("text", "function sayHello(){alert('Hello World!');}");
HtmlPage.Document.Body.AppendChild(heScript); 

调用Javascript函数

可以调用浏览器内置的函数，也可以调用自定义的函数。
示例：(调用上面定义的代码段的函数)
XAML:

<Grid Background="DarkGreen" ShowGridLines="True">
    <Button x:Name="sayHello" Content="Hello World!"
            Click="sayHello_Click"></Button>
</Grid>

C#:

private void sayHello_Click(object sender, RoutedEventArgs e)
{
    ScriptObject so = HtmlPage.Window.GetProperty("sayHello") as ScriptObject;

    so.InvokeSelf();
}

运行效果：


InvokeSelf方法定义为：

public virtual Object InvokeSelf(    // 调用ScriptObject实例自身
    params Object[] args        // 为Javascript函数的参数
)

也可以用直接用 HtmlPage.Window.Invoke("sayHello");
Invoke方法定义为：

Invoke方法定义为：
public virtual Object Invoke(
    string name,        // 要调用的Javascript的函数名
    params Object[] args     // 为Javascript函数的参数
)

HtmlWindow的Eval()方法

Javascript的Eval()函数有时候非常好用，这里HtmlWindow的Eval()方法也具有将字符串转化为可执行代码的功能。
示例：
XAML:

<StackPanel Background="DarkGreen">
    <TextBox x:Name="txtScript" Width="400"
             Margin="0,30,0,30"></TextBox>
    <Button x:Name="btnEval" Content="Test Eval()"
            Width="100" Click="btnEval_Click"></Button>
</StackPanel>

C#:

private void btnEval_Click(object sender, RoutedEventArgs e)
{
    HtmlPage.Window.Eval(txtScript.Text);
}

运行效果：


HtmlWindow的Alert()、Confirm()、Prompt()方法

以上三个方法都是包装的浏览器Javascript函数，如HtmlWindow.Confirm()方法源码为：

public bool Confirm(string confirmText)
{
    HtmlPage.VerifyThread();
    if (confirmText == null)
    {
        confirmText = string.Empty;
    }
    return (bool) this.Invoke("confirm", new object[] { confirmText });
}

示例：
XAML:

<Grid Background="DarkGreen">        
    <Button x:Name="btnTest" Content="Test Alert、Confirm、Prompt"
            Click="btnTest_Click"></Button>
</Grid>

C#:

private void btnTest_Click(object sender, RoutedEventArgs e)
{
    var str = HtmlPage.Window.Prompt("Please in put your blog:");

    var confirm = HtmlPage.Window.Confirm("Your blog is:\"" + str + "\",are you sure?");

    if (confirm)
    {
        HtmlPage.Window.Alert("OK! Your blog is:\"" + str + "\"");
    }
    else
    {
        HtmlPage.Window.Alert("I'm sorry, you input a wrong blog!");
    }
}

运行效果：






HtmlWindow的CreateInstance()方法

其作用是创建Javascript对象的实例。

示例：
Javascript:
<script type="text/javascript">
var Hello = function(yourName)
{
    this.YourName = yourName;
}
Hello.prototype.Alert = function()
{
    alert("Hello " + this.YourName);
}    
</script>

XAML:
<StackPanel Background="DarkGreen">
    <TextBox x:Name="txtYourName" Width="400" Margin="0,30,0,30"></TextBox>
    <Button x:Name="btnTest" Content="Test CreateInstance"
            Width="200" Click="btnTest_Click"></Button>
</StackPanel> 

C#:
private void btnTest_Click(object sender, RoutedEventArgs e)
{
    ScriptObject so = HtmlPage.Window.CreateInstance("Hello", txtYourName.Text);
    so.Invoke("Alert");
}

运行效果：



HtmlWindow的Navigate()、NavigateToBookmark()方法

这两个(Navigate()有三个重载方法)方法内部实现都是调用的浏览器内置的Javascript函数(open())或属性(location)，作用是导航到其它链接或打开新窗口及导航到书签，使用方法不多介绍。

结束语：

Silverlight 提供了强大的互操作接口，可以实现丰富多样的交互，大大方便了网页设计开发人员。