前言
最近在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”)app.xaml中:
1 private void Application_Startup(object sender, StartupEventArgs e) 2 { 3 HtmlPage.RegisterScriptableObject("Test", this); 4 5 this.RootVisual = new MainPage(); 6 }
2.MainPage.xaml要使得某个方法能被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 οnclick="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>
作者:
ps_zw