SilverLight浏览器交互之：Html页面通过Javascript调用SilverLight程序内方法（附源码）

最新推荐文章于 2024-11-16 14:11:26 发布

qianjiu

最新推荐文章于 2024-11-16 14:11:26 发布

阅读量885

点赞数

分类专栏： asp.net silverlight 文章标签： silverlight javascript html 浏览器 button properties

asp.net 同时被 2 个专栏收录

59 篇文章 0 订阅

订阅专栏

silverlight

12 篇文章 0 订阅

订阅专栏

概述：

SilverLight运行浏览器时，像Ajax一样可以在Html页面通过Javascript调用SilverLight程序内方法。

效果：

[ScriptableMember]

指示可由 JavaScript 调用方访问的特定属性、方法或事件。

为了调用SilverLight项目中的方法，我们必须指定该方法能否被Javascript调用

HtmlPage.RegisterScriptableObject 方法
注册托管对象以便用于通过 JavaScript 代码的可脚本化访问。

为了使浏览能够通过Javascript访问SilverLight程序，必须先声明该SilverLight程序能被Javascript调用。

Xaml代码：

    <Grid x:Name="LayoutRoot"  Background="YellowGreen">

    </Grid>

SilverLight CS代码：

    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();

            //HtmlPage.RegisterScriptableObject 方法 
            //注册托管对象以便用于通过 JavaScript 代码的可脚本化访问。
            HtmlPage.RegisterScriptableObject("Button", this);
        }

        /// <summary>
        /// 执行网络服务
        /// [ScriptableMember]指示可由 JavaScript 调用方访问的特定属性、方法或事件。
        /// </summary>
        [ScriptableMember]
        public void ExecuteWebService()
        {
            MessageBox.Show("我是SilverLight项目中的MessageBox","o(∩_∩)o 哈哈",MessageBoxButton.OK);
        }

    }

好现在我们看看怎么在Html页面调用SilverLight 代码：

创建一个SilverLight插件，使Javascript可以调用插件里面注册的方法。

<!-- 
通常会使用这个对象标签方法 创造Silverlight插件
 -->
<body style="height: 100%;">
    <div id="mySilverlightHost" style="height: 100%;">
        <script type="text/javascript">
            var host = document.getElementById("mySilverlightHost");

            //创建一个指定的对象并返回对它的引用。
            Silverlight.createObjectEx({
                //设置创建对象的数据来源
                source: "ClientBin/ReferencingFromScript.xap",
                //设置对象层次的父对象
                parentElement: host,
                //设置唯一标识id
                id: "mySilverlightControl",
                //设置属性
                properties: {
                    height: "100%",
                    width: "100%",
                    version: "2.0"
                },
                events: {}
            });    
        </script>
    </div>
    <input type="button" onclick="buttonClick();" value="调用SilverLight方法" />
</body>

写Javascript类来调用方法：

<head>
    <title>Silverlight Project Test Page </title>
    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript">
        function buttonClick() {
            //获取SilverLight插件中 以创建的对象
            var plugin = document.getElementById("mySilverlightControl");
            //执行SilverLight项目中已经注册的可被Javascript调用的方法
            plugin.content.Button.ExecuteWebService();
        }
    </script>
</head>