Silverlight和js之间的相互操作

前言

最近在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;0px;border:0px"></iframe></div>
15 </form>

运行效果:


 image

原文地址:https://www.cnblogs.com/pszw/p/2327647.html