Silverlight与JavaScript的互相调用

Silverlight与JavaScript的互相调用

1.在Silverlight中调用JavaScript

 

1.1.      设置调用页面

在head中添加js脚本

    <!--方法1中用到-->

    <script type="text/javascript">

        function Hello(message) {

            alert('Hello:' + message);

        }

    </script>

 

    <!--方法2中用到-->

    <script type="text/javascript">

        myHello = function(message) {

            this.Message = message;

        }

        myHello.prototype.Display = function() {

            alert('Hello:' + this.Message);

        }

    </script>

 

 

在Form中添加dom元素

<div id="result">

        <a style=" color:Blue">链接</a>

</div>

 

 

1.2.       设置Silverlight页面

前台代码：

     <StackPanel Orientation="Horizontal">

                <TextBox x:Name="input" Width="340" Height="40" Margin="20 0 20 0"></TextBox>

                <Button x:Name="submit1" Width="120" Height="40" Background="Red"

            Content="方法1" FontSize="20" Foreground="Red" Click="submit1_Click"></Button>

                <Button x:Name="submit2" Width="120" Height="40" Background="Red"

            Content="方法2" FontSize="20" Foreground="Red" Click="submit2_Click"></Button>

                <Button x:Name="submit3" Width="120" Height="40" Background="Red"

            Content="方法3" FontSize="20" Foreground="Red" Click="submit3_Click"></Button>

                <Button x:Name="submit4" Width="120" Height="40" Background="Red"

            Content="方法3的应用" FontSize="20" Foreground="Red" Click="submit4_Click"></Button>

            </StackPanel>

 

后台代码：

private void submit1_Click(object sender, RoutedEventArgs e)

        {

            //方法1:使用InvokeSelf调用脚本对象的自身

            ScriptObject hello = HtmlPage.Window.GetProperty("Hello") as ScriptObject;

            hello.InvokeSelf(this.input.Text);

 

        }

        private void submit2_Click(object sender, RoutedEventArgs e)

        {

            //方法2:使用Invoke传入名称进行调用

            ScriptObject script = HtmlPage.Window.CreateInstance("myHello", this.input.Text);

            object result = script.Invoke("Display");

 

        }

        private void submit3_Click(object sender, RoutedEventArgs e)

        {

            //方法3:给该方法传入一段字符串，它都会作为JavaScript来执行 如：HtmlPage.Window.Eval("alert('ddddd')")

            HtmlPage.Window.Eval(this.input.Text);

        }

 

        private void submit4_Click(object sender, RoutedEventArgs e)

        {

            //方法3的应用：使用HtmlPage.Window.Eval 来取html元素

            HtmlElement result = HtmlPage.Window.Eval("document.getElementById('result')") as HtmlElement;

            string message = result.GetAttribute("innerHTML");

            HtmlPage.Window.Alert(message);

 

        }

 

2.在JavaScript中调用Silverlight中的.net代码

 

2.1.       新建SilverLight页面,

注意：需要 在Silverlight中公开相关方法供JavaScript调用

前台代码：

<StackPanel Background="#CDFCAE" Orientation="Horizontal">

            <Border CornerRadius="10" Width="100" Height="40" Margin="50 10 0 0">

                <TextBlock Text="结果显示：" FontSize="20" Foreground="Red"></TextBlock>

            </Border>

            <Border CornerRadius="10" Background="Green" Width="300" Height="40">

                <TextBlock x:Name="result" FontSize="20" Foreground="White"

                   Margin="20 5 0 0"></TextBlock>

            </Border>

        </StackPanel>

后台代码：

    public partial class MainPage : UserControl

    {

        public MainPage()

        {

            InitializeComponent();

            Loaded+=new RoutedEventHandler(MainPage_Loaded);

        }

 

        private void MainPage_Loaded(object sender, RoutedEventArgs e)

        {

            //示例1:调用当前类中的某个方法

           // HtmlPage.RegisterScriptableObject("Calculator", this);

 

            //示例2:调用silverLight中其它类的某个方法

            HtmlPage.RegisterCreateableType("calculator", typeof(Calculator));

        }

 

        //供示例1调用

        //[ScriptableMember]

        //public void Add(int x, int y)

        //{

        //    int z = x + y;

        //    this.result.Text = String.Format("{0} + {1} = {2}", x, y, z);

        //}

    }

 

 

    //供示例2调用

    [ScriptableType]

    public class Calculator

    {

        [ScriptableMember]

        public int Add(int x, int y)

        {

            return x + y;

        }

}

 

2.2.      调用

在head中添加js脚本

   <script type="text/javascript">

        //供示例1调用

        function callSilverlight1() {

            var slPlugin = document.getElementById('Xaml1');

            slPlugin.content.Calculator.Add(document.getElementById('txt1').value, document.getElementById('txt2').value);

 

        }

    </script>

 

    <script type="text/javascript">

        //供示例2调用

        function callSilverlight2() {

            var slPlugin = document.getElementById('Xaml1');

            var cal = slPlugin.content.services.createObject("calculator");

 

            alert(cal.Add(document.getElementById('txt1').value, document.getElementById('txt2').value));

 

        }

</script>

 

在Form中添加代码:

<div class="main">

        <input id="txt1" type="text" />

        <input id="txt2" type="text" />

        <input id="Button1" type="button" value="调用(方法2)" onclick="callSilverlight2()" />

    </div>