Silverlight 2学习教程（五）：JavaScript与Silverlight托管代码相互调用

概述要实现JavaScript调用Silverlight程序里面的托管代码，需要先在应用程序的启动（Application_Startup）事件里注册要进行访问的对象，而要从Silverlight的托管代码里访问HTML页面对象或者页面中的JavaScript，使用HtmlPage的Document/HtmlElement和HtmlWindow即可。 下面，我们就以例子来说明两者相互访问的方法，代码里

要实现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 里面d出的对话框。 "   +  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[
  // 定义@R_403_6195@：
  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托管代码相互调用所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。