Silverlight 2 教程（五）：JavaScript与Silverlight托管代码相互调用
2009-02-19 16:47
645 查看
要实现JavaScript调用Silverlight程序里面的托管代码，需要先在应用程序的启动（Application_Startup）事件里注册要进行访问的对象，而要从Silverlight的托管代码里访问HTML页面对象或者页面中的JavaScript，使用HtmlPage的Document/HtmlElement和HtmlWindow即可。
下面，我们就以例子来说明两者相互访问的方法，代码里面有很详细的注释，这里不再累述。
Page.xaml：
<UserControl x:Class="SilverlightApplication1.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<Canvas Canvas.Top="20">
<TextBlock Canvas.Top="10" Canvas.Left="20">请输入您的姓名： </TextBlock>
<TextBox x:Name="UserInput" Width="200" Height="30" Canvas.Top="40" Canvas.Left="20"></TextBox>
<TextBlock x:Name="Msg" Canvas.Top="90" Canvas.Left="20" Foreground="Navy" FontSize="36"></TextBlock>
<Button Click="Button_Click" Content="单击我" FontSize="24" Width="160" Height="60" x:Name="BtnTest" Canvas.Top="160" Canvas.Left="20"></Button>
</Canvas>
</Grid>
</UserControl>
Page.xaml.cs：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;
namespace SilverlightApplication1
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
string UserInputContent = this.UserInput.Text;
if (UserInputContent.Equals(String.Empty))
{
UserInputContent = "Hello Silverlight World!";
}
else
{
UserInputContent = "你好，" + UserInputContent;
}
HtmlWindow win = HtmlPage.Window;
this.Msg.Text = UserInputContent;
win.Alert("Silverlight 里面弹出的对话框。 " + UserInputContent);
//执行页面中的js函数：
win.Eval("getArrayTest()");
Object[] args = { "将此参数传递给 js 函数" };
win.Invoke("getArrayTest", args);
//如果页面中的值
HtmlDocument doc = HtmlPage.Document;
doc.GetElementById("UserName").SetAttribute("value", this.UserInput.Text);
}
[ScriptableMember()]
public string InterInvole()
{
string username = HtmlPage.Document.GetElementById("UserName").GetAttribute("value");
this.UserInput.Text = username;
this.Msg.Text = "您输入了：" + username;
return "你从js脚本中调用了 Silverlight 里面的方法。";
}
}
}
App.xaml.cs：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;
namespace SilverlightApplication1
{
public partial class App : Application
{
public App()
{
this.Startup += this.Application_Startup;
this.Exit += this.Application_Exit;
this.UnhandledException += this.Application_UnhandledException;
InitializeComponent();
}
private void Application_Startup(object sender, StartupEventArgs e)
{
// Load the main control
Page p = new Page();
HtmlPage.RegisterScriptableObject("SilverlightApplicationExample", p);
// 请注意这里的定义方法，如果这里的p写成 new Page()，则Javascript基本不能给 UserInput 赋值！
this.RootVisual = p;
}
private void Application_Exit(object sender, EventArgs e)
{
}
private void Application_UnhandledException(object sender, ApplicationUnhandledExceptionEventArgs e)
{
}
}
}
SilverlightApplication1TestPage.aspx：
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Silverlight 2托管代码与Javascript交互的例子</title>
<script type="text/javascript">
//<!{CDATA[
//定义全局变量：
var testVar = "孟宪会";
//定义全局函数：
function getArrayTest()
{
if(arguments.length > 0)
{
alert("js 对话框：您传递了参数。" + arguments[0]);
return arguments[0];
}
else
{
alert("js 对话框：无参数调用。");
return "js 函数返回值";
}
}
function SetUserName()
{
alert(SilverlightPlugin.Content.SilverlightApplicationExample.InterInvole());
}
//定义Silverlight插件对象
var SilverlightPlugin = null;;
function pluginLoaded(sender)
{
SilverlightPlugin = sender.get_element();
}
//]]>
</script>
</head>
<body style="height: 100%; margin: 0;">
<form id="form1" runat="server">
<div style="border: 2px solid #EEE; margin: 20px;padding:20px">
请输入你的名字：<input id="UserName" type="text" value="" />
<input type="button" onclick="SetUserName()" value="将名字传递到 Silverlight" />
</div>
<br />
<div style="border: 2px solid #EEE;margin: 20px;">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Silverlight ID="Xaml1" runat="server" OnPluginLoaded="pluginLoaded" Source="~/ClientBin/SilverlightApplication1.xap" Version="2.0" Width="400px" Height="300px" />
</div>
</form>
</body>
</html>
下面，我们就以例子来说明两者相互访问的方法，代码里面有很详细的注释，这里不再累述。
Page.xaml：
<UserControl x:Class="SilverlightApplication1.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<Canvas Canvas.Top="20">
<TextBlock Canvas.Top="10" Canvas.Left="20">请输入您的姓名： </TextBlock>
<TextBox x:Name="UserInput" Width="200" Height="30" Canvas.Top="40" Canvas.Left="20"></TextBox>
<TextBlock x:Name="Msg" Canvas.Top="90" Canvas.Left="20" Foreground="Navy" FontSize="36"></TextBlock>
<Button Click="Button_Click" Content="单击我" FontSize="24" Width="160" Height="60" x:Name="BtnTest" Canvas.Top="160" Canvas.Left="20"></Button>
</Canvas>
</Grid>
</UserControl>
Page.xaml.cs：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;
namespace SilverlightApplication1
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
string UserInputContent = this.UserInput.Text;
if (UserInputContent.Equals(String.Empty))
{
UserInputContent = "Hello Silverlight World!";
}
else
{
UserInputContent = "你好，" + UserInputContent;
}
HtmlWindow win = HtmlPage.Window;
this.Msg.Text = UserInputContent;
win.Alert("Silverlight 里面弹出的对话框。 " + UserInputContent);
//执行页面中的js函数：
win.Eval("getArrayTest()");
Object[] args = { "将此参数传递给 js 函数" };
win.Invoke("getArrayTest", args);
//如果页面中的值
HtmlDocument doc = HtmlPage.Document;
doc.GetElementById("UserName").SetAttribute("value", this.UserInput.Text);
}
[ScriptableMember()]
public string InterInvole()
{
string username = HtmlPage.Document.GetElementById("UserName").GetAttribute("value");
this.UserInput.Text = username;
this.Msg.Text = "您输入了：" + username;
return "你从js脚本中调用了 Silverlight 里面的方法。";
}
}
}
App.xaml.cs：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;
namespace SilverlightApplication1
{
public partial class App : Application
{
public App()
{
this.Startup += this.Application_Startup;
this.Exit += this.Application_Exit;
this.UnhandledException += this.Application_UnhandledException;
InitializeComponent();
}
private void Application_Startup(object sender, StartupEventArgs e)
{
// Load the main control
Page p = new Page();
HtmlPage.RegisterScriptableObject("SilverlightApplicationExample", p);
// 请注意这里的定义方法，如果这里的p写成 new Page()，则Javascript基本不能给 UserInput 赋值！
this.RootVisual = p;
}
private void Application_Exit(object sender, EventArgs e)
{
}
private void Application_UnhandledException(object sender, ApplicationUnhandledExceptionEventArgs e)
{
}
}
}
SilverlightApplication1TestPage.aspx：
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Silverlight 2托管代码与Javascript交互的例子</title>
<script type="text/javascript">
//<!{CDATA[
//定义全局变量：
var testVar = "孟宪会";
//定义全局函数：
function getArrayTest()
{
if(arguments.length > 0)
{
alert("js 对话框：您传递了参数。" + arguments[0]);
return arguments[0];
}
else
{
alert("js 对话框：无参数调用。");
return "js 函数返回值";
}
}
function SetUserName()
{
alert(SilverlightPlugin.Content.SilverlightApplicationExample.InterInvole());
}
//定义Silverlight插件对象
var SilverlightPlugin = null;;
function pluginLoaded(sender)
{
SilverlightPlugin = sender.get_element();
}
//]]>
</script>
</head>
<body style="height: 100%; margin: 0;">
<form id="form1" runat="server">
<div style="border: 2px solid #EEE; margin: 20px;padding:20px">
请输入你的名字：<input id="UserName" type="text" value="" />
<input type="button" onclick="SetUserName()" value="将名字传递到 Silverlight" />
</div>
<br />
<div style="border: 2px solid #EEE;margin: 20px;">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Silverlight ID="Xaml1" runat="server" OnPluginLoaded="pluginLoaded" Source="~/ClientBin/SilverlightApplication1.xap" Version="2.0" Width="400px" Height="300px" />
</div>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Silverlight 2学习教程（五）：JavaScript与Silverlight托管代码相互调用
- Silverlight 2学习教程（五）：JavaScript与Silverlight托管代码相互调用
- [导入]Silverlight 2学习教程（五）：JavaScript与Silverlight托管代码相互调用
- [导入]Silverlight 2学习教程（六）：Silverlight托管代码调用Javascript中的JSON对象
- Silverlight 2学习教程（六）： Silverlight托管代码调用Javascript中的JSON对象
- Silverlight 2学习教程（六）：Silverlight托管代码调用Javascript中的JSON对象
- JavaScript与Silverlight托管代码相互调用
- Silverlight 2 教程（六）： Silverlight托管代码调用Javascript中的JSON对象
- Silverlight和浏览器交互介绍-------JavaScript调用托管代码
- silverlight 中javascript 代码与托管代码的互调用 以及一些思考
- Silverlight和浏览器交互(3)-------JavaScript调用托管代码
- Silverlight与JavaScript相互调用
- Android高手进阶教程之---Android与JavaScript方法相互调用
- 一步一步学Silverlight 2系列（22）：在Silverlight中如何用JavaScript调用.NET代码
- Silverlight和javascript的相互调用
- Android Java和JavaScript代码相互调用
- Android高手进阶教程(二十)之---Android与JavaScript方法相互调用！
- Android高手进阶教程(二十)之---Android与JavaScript方法相互调用！
- 一步一步学Silverlight 2系列（22）：在Silverlight中如何用JavaScript调用.NET代码
- （22）：Silverlight 2 在Silverlight中如何用JavaScript调用.NET代码