要实现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 >
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 里面的方法。 " ;
}
}
}
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)
{
}
}
}
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 >
<% @ 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 >
运行结果:
原帖地址:http://blog.csdn.net/net_lover/archive/2008/04/06/2254267.aspx 感谢孟宪会老师