JavaScript与Silverlight托管代码相互调用
要实现JavaScript调用Silverlight程序里面的托管代码,需要先在应用程序的启动(Application_Startup)事件里注册要进行访问的对象,而要从Silverlight的托管代码里访问HTML页面对象或者页面中的JavaScript,使用HtmlPage的Document/HtmlElement和HtmlWindow即可。 下面,我们就以例子来说明两者相互访问的方法,代码里面有很详细的注释,这里不再累述。 Page.xaml: <UserControlx:Class="SilverlightApplication1.Page" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400"Height="300"> <Gridx:Name="LayoutRoot"Background="White"> <CanvasCanvas.Top="20"> <TextBlockCanvas.Top="10"Canvas.Left="20">请输入您的姓名:</TextBlock> <TextBoxx:Name="UserInput"Width="200"Height="30"Canvas.Top="40"Canvas.Left="20"></TextBox> <TextBlockx:Name="Msg"Canvas.Top="90"Canvas.Left="20"Foreground="Navy"FontSize="36"></TextBlock> <ButtonClick="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: usingSystem; usingSystem.Collections.Generic; usingSystem.Linq; usingSystem.Windows; usingSystem.Windows.Controls; usingSystem.Windows.Documents; usingSystem.Windows.Input; usingSystem.Windows.Media; usingSystem.Windows.Media.Animation; usingSystem.Windows.Shapes; usingSystem.Windows.Browser; namespaceSilverlightApplication1 { public partial classPage : UserControl { publicPage() { InitializeComponent(); } private voidButton_Click(objectsender, RoutedEventArgs e) { stringUserInputContent= 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 stringInterInvole() { stringusername=HtmlPage.Document.GetElementById("UserName").GetAttribute("value"); this.UserInput.Text=username; this.Msg.Text= "您输入了:" +username; return "你从js脚本中调用了 Silverlight 里面的方法。"; } } } App.xaml.cs: usingSystem; usingSystem.Collections.Generic; usingSystem.Linq; usingSystem.Windows; usingSystem.Windows.Controls; usingSystem.Windows.Documents; usingSystem.Windows.Input; usingSystem.Windows.Media; usingSystem.Windows.Media.Animation; usingSystem.Windows.Shapes; usingSystem.Windows.Browser; namespaceSilverlightApplication1 { public partial classApp : Application { publicApp() { this.Startup+= this.Application_Startup; this.Exit+= this.Application_Exit; this.UnhandledException+= this.Application_UnhandledException; InitializeComponent(); } private voidApplication_Startup(objectsender, StartupEventArgs e) { //Load the main control Page p= newPage(); HtmlPage.RegisterScriptableObject("SilverlightApplicationExample", p); //请注意这里的定义方法,如果这里的p写成 new Page(),则Javascript基本不能给 UserInput 赋值! this.RootVisual=p; } private voidApplication_Exit(objectsender, EventArgs e) { } private voidApplication_UnhandledException(objectsender, 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"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headrunat="server"> <title>Silverlight 2托管代码与Javascript交互的例子</title> <scripttype="text/javascript"> //<!{CDATA[ //定义全局变量: vartestVar= "孟宪会"; //定义全局函数: functiongetArrayTest() { if(arguments.length> 0) { alert("js 对话框:您传递了参数。" +arguments[0]); return arguments[0]; } else { alert("js 对话框:无参数调用。"); return "js 函数返回值"; } } functionSetUserName() { alert(SilverlightPlugin.Content.SilverlightApplicationExample.InterInvole()); } //定义Silverlight插件对象 varSilverlightPlugin= null;; functionpluginLoaded(sender) { SilverlightPlugin=sender.get_element(); } //]]> </script> </head> <bodystyle="height: 100%; margin: 0;"> <formid="form1"runat="server"> <divstyle="border: 2px solid #EEE; margin: 20px;padding:20px"> 请输入你的名字:<inputid="UserName"type="text"value="" /> <inputtype="button"onclick="SetUserName()"value="将名字传递到 Silverlight" /> </div> <br/> <divstyle="border: 2px solid #EEE;margin: 20px;"> <asp:ScriptManagerID="ScriptManager1"runat="server"> </asp:ScriptManager> <asp:SilverlightID="Xaml1"runat="server"OnPluginLoaded="pluginLoaded"Source="~/ClientBin/SilverlightApplication1.xap"Version="2.0"Width="400px"Height="300px" /> </div> </form> </body> </html> 运行结果: ![]() |