silverlight与javascript的交互

最新推荐文章于 2025-08-05 09:52:35 发布

原创最新推荐文章于 2025-08-05 09:52:35 发布 · 880 阅读

0 ·

CC 4.0 BY-SA版权

silverlight 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了Silverlight与JavaScript之间的交互方法，包括如何从JavaScript调用Silverlight中的方法及从Silverlight调用JavaScript方法。通过具体示例展示了构建浏览器桥接、注册可脚本处理的对象及调用客户端脚本对象的过程。

在silverlight的开发中，可以做到silverlight中写到的方法与javascript中定义的方法交互使用，而且silverligt本身方法的执行效率就较高，后台与前端的交互显得更加容易，如何交互，请看下面的具体实现，涉及test1.xaml和test1.html，这两者都是在创建silverlight应用程序时自动生成的：

一、javascrpt中调用silverlight后台方法

调用的关键在于如何让后台方法（silverlight中定义的方法）暴露给客户端，便于javascript调用，暴露之后，客户端访问silverlight对象，进而找到暴露的后台方法

1、构建浏览器桥

引用 using System.Windows.Browser，主要用到HtmlPage对象，代表当前页面。

在test1.xaml的load事件里将silverlight注册成宿主Html页上的一个可进行脚本处理的对象

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            HtmlPage.RegisterScriptableObject("myscript",this);
        }

注：html页面上运行的代码会用myscript这个名称访问silverlight对象，this为整个html对象

将已写好的silverlight方法向外部调用者公开，只需添加[ScriptableMember]属性即可

        [ScriptableMember]
        public void UpdateCities(string country)
        {
            List<CityData> cities = GetCities(country);
            itemsCon.ItemsSource = cities;
        }

2、Html中调用silverlight对象中写的方法

在test.html中我们很容易找到<object>标记，这个标记即为silverlight对象，其中包括source、background、onError等参数，将该对象标以id="silverlightobj"，这样javascript中就可以根据ID访问该对象

<object id="silverlightobj" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
		  <param name="source" value="ClientBin/SbSCh9_1.xap"/>
		  <param name="onError" value="onSilverlightError" />
		  <param name="background" value="white" />
		  <param name="minRuntimeVersion" value="5.0.61118.0" />
		  <param name="autoUpgrade" value="true" />
		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.0" style="text-decoration:none">
 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="获取 Microsoft Silverlight" style="border-style:none"/>
		  </a>
	    </object>

注：type属性指定要加载的对象的MIME类型，对于silverlight应用程序，要使用的是application/x-silverlight-2这个MIME类型

调用后台方法

    <script type="text/javascript">
        function updatecity(country) {
            var slplugin = document.getElementById("silverlightobj");
            slplugin.content.myscript.UpdateCities(country);
        }
    </script>

这样就完成了Html中调用silverlight方法

二、silverlight方法中调用客户端的javascript方法

关键点在HtmlPage.Window.GetProperty("MoveMap") as ScriptObject，获取页面上的script对象

这种调用比较简单，附上代码：

ScriptObject movemap = HtmlPage.Window.GetProperty("MoveMap") as ScriptObject;
movemap.InvokeSelf(strcity);

其中html页面上的script：

    <script type="text/javascript">
        var map = null;
        function GetMap() {
            map = new VEMap('mapdiv');
            map.LoadMap();
        }
        function MoveMap(where) {
            try {
                map.Find(null,where);     
            } catch (e) {
            alert(e.Message);
            }
        }
    </script>

注：GetProperty参数为script方法名

总结：在silverlight中可以用html按钮直接调用C#方法，笔者试了下在asp.net测试类似调用，最终失败，在asp.net上最好还是直接用服务器控件与后台方法直接通信