代码改变世界

Silverlight和js之间的相互操作

2012-01-31 23:22  ps_zw  阅读(2561)  评论(0)  编辑  收藏  举报

前言

最近在silverlight开发中，SL需要和js进行交互，研究了下怎么使用。

SL调用js方法

这个很简单一句代码就完成了：

HtmlPage.Window.Invoke("MethodName","para-1",...,"para-n");

说明：上述方法的第一个参数为js的方法名，第2-n个参数为js方法的参数。

示例（以设置SL的Height属性为例）：

将object的ID定义为"slDemo"，则有如下的js代码：

 1 <script type="text/javascript">
 2 var slHeight = 650;
 3 function silverlightResize(targetHeight) {
 4             if (targetHeight != undefined) {
 5                 slHeight = targetHeight;
 6             }
 7             if (isNaN(slHeight)) {
 8                 slHeight = 450;
 9             }
10             var frameHeight = 0;
11             if (! +[1, ]) { //IE
12                 frameHeight = document.documentElement.clientHeight - 50;
13             }
14             else { //其它浏览器
15                 frameHeight = window.innerHeight - 50;
16             }
17             if (isNaN(frameHeight)) {
18                 frameHeight = slHeight;
19             }
20             slHeight = Math.max(slHeight, frameHeight);
21             //alert(slHeight);
22             $("#slDemo").height(slHeight);
23         }
24  </script>

在SL中的调用为：

 HtmlPage.Window.Invoke(“silverlightResize”, "600");

注：上述js代码使用了jquery

js中调用SL方法

在js中操作SL方法时，

1.需要先注册托管对象以便用于通过 JavaScript 代码的可脚本化访问。注册方法定义如下（摘自MSDN）：

public static void RegisterScriptableObject(
    string scriptKey,
    Object instance
)
 

参数
scriptKey
类型：System..::..String

用于注册托管对象的名称。

instance
类型：System..::..Object

一个托管对象。

示例代码（我们指定注册对象的名称为“Test”）：

1         private void Application_Startup(object sender, StartupEventArgs e)
2         {
3             HtmlPage.RegisterScriptableObject("Test", this);
4 
5             this.RootVisual = new MainPage();
6         }

2.要使得某个方法能被js调用还需要在该方法上使用特性：[ScriptableMemberAttribute]。示例代码：

1         [ScriptableMember]
2         public void TestMethod(string param)
3         {
4             MessageBox.Show(param);
5         }

3.sl加载时获取sl实例，并通过上述定义的名称“Test”调用sl中的方法“TestMethod”。js示例如下：

 1     <script type ="text/javascript">
 2         var slDemo = null;
 3         function callSL() {            
 4             slDemo.Content.Test.TestMethod("测试js调用sl");
 5         }
 6 
 7         function onSilverlightLoad(sender) {
 8             slDemo = sender.getHost(); 
 9         }
10     </script>

4.在page中加入一个测试按钮，并修改sl参数信息，代码如下：

 1 <form id="form1" runat="server" style="height:100%">
 2     <div> <button onclick="callSL()">测试</button></div>
 3     <div id="silverlightControlHost">
 4         <object id = "slDemo" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
 5           <param name="source" value="ClientBin/SL_Demo.xap"/>
 6           <param name="onError" value="onSilverlightError" />
 7           <param name="onLoad" value="onSilverlightLoad" />
 8           <param name="background" value="white" />
 9           <param name="minRuntimeVersion" value="4.0.50826.0" />
10           <param name="autoUpgrade" value="true" />
11           <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
12                <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="获取 Microsoft Silverlight" style="border-style:none"/>
13           </a>
14         </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
15     </form>

运行效果：


 image