Step by step learning Silverlight 2 series (21): How to call JavaScript in Silverlight

Copyright: original works, allowing reproduced, be sure to identify the form of hyperlinks article reprint the original source , author information and this statement. Otherwise held liable. http://terrylee.blog.51cto.com/342737/67264

Outline

Silverlight 2 Beta 1 release, whether from the Runtime or Tools gave us a lot of surprises, such as support for language framework Visual Basic, Visual C #, IronRuby, Ironpython, support for JSON, Web Service, WCF, and so on a Sockets series of new features. "Step by step learning Silverlight 2 Series" Article 2 aspects of basic knowledge, data and communications, custom controls, animation, graphics, images, etc. with quick access to your Silverlight 2 development from Silverlight.

Built-in support for Silverlight, HTML, and other client-side scripting. In many cases, Web applications we write using some JavaScript or AJAX framework, we hope to be able to call some method in the script Silverlight, or trigger the execution of a script in Silverlight, then you need to use in Silverlight calling JavaScript, this article will briefly introduce the content.

Use GetProperty to get the script objects

First look at a simple example, put a div in Silverlight test page used to display information:

<div id="result"></div>

Write a simple piece of JavaScript code:

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

Then write a simple input interface information:

<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>

Implementation calls for the script:

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

Providing any package ScriptObject client script, just use of JavaScript, AJAX framework may be other, as jQuery like. Then call InvokeSelf () method, passing parameters, here ScriptObject a total of two methods, Invoke and InvokeSelf, if we just call the script object itself, you can use InvokeSelf, if the script object There are other functions, etc., can use invoke the name of the incoming call, defines two methods are as follows:

[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。

本文出自 “TerryLee技术专栏” 博客，请务必保留此出处http://terrylee.blog.51cto.com/342737/67264

转载于:https://www.cnblogs.com/hdjjun/archive/2008/12/24/1361469.html