----------http://dotnet.aspx.cc/article/fb7d9cbd-e11a-40b1-9220-ade9cbbebc67/read.aspx
要實現JavaScript調用Silverlight程序裏面的託管代碼,需要先在應用程序的啓動(Application_Startup)事件裏註冊要進行訪問的對象,而要從Silverlight的託管代碼裏訪問HTML頁面對象或者頁面中的JavaScript,使用HtmlPage的Document/HtmlElement和HtmlWindow即可。 下面,我們就以例子來說明兩者相互訪問的方法,代碼裏面有很詳細的註釋,這裏不再累述。
<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學習教程 |