Silverlight与HTML页面交互基本方法(js调用Silverlight方法/属性)[总结]
JavaScript中调用Silverlight方法/属性
要从JavaScript中调用Silverlight方法,Silverlight必须首先注册ScriptableObject。这可以通过给要暴露给js的类型加上ScriptableTypeAttribute,这样就会暴露该类型的所有属性、方法和事件;如果只要暴露一部分成员,也可以仅给这一部分成员标记ScriptableMemberAttribute(在过去的版本中仅有ScriptableAttribute)。这个标记是非常宽松的,只要类中有成员是Scriptable的,就可以使用HtmlPage.RegisterScriptableObject方法来注册这个类使其能被js访问。
在silverlight页面中暴露方法,代码如下
1 public partial class JsSetSLPageValue : Page
2 {
3 public JsSetSLPageValue()
4 {
5 InitializeComponent();
6 HtmlPage.RegisterScriptableObject("Page", this);
7 }
8
9 [ScriptableMember]
10 public void process(string arg)
11 {
12 this.label1.Content = arg;
13 MessageBox.Show(arg);
14 }
15
16 // 当用户导航到此页面时执行。
17 protected override void OnNavigatedTo(NavigationEventArgs e)
18 {
19 }
20 }
在Html页面中这样调用:
1 function myfunc() {
2 var slHost = document.getElementById("slcontrol");
3 var page = slHost.Content.Page;
4 var val = document.getElementById("txtValue").value;
5 page.process(val);
6 }
1 <div id="silverlightControlHost" style="width: 400px; height: 400px; border: 5px solid Red">
2 <object id="slcontrol" data="data:application/x-silverlight-2," type="application/x-silverlight-2"
3 width="400" height="400">
4 <param name="source" value="ClientBin/SLWCFService.xap"/>
5 <param name="onError" value="onSilverlightError"/>
6 <param name="background" value="white"/>
7 <param name="minRuntimeVersion" value="4.0.50826.0"/>
8 <param name="autoUpgrade" value="true"/>
9 <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration: none">
10 <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="获取 Microsoft Silverlight"
11 style="border-style: none"/>
12 </a>
13 </object>
14 <iframe id="_sl_historyFrame" style="visibility: hidden; height: 0px; width: 0px;
15 border: 0px"></iframe>
16 </div>
17 <div style="height: 200px;">
18 <input type="text" id="txtValue"/>
19 <input id="btnText" type="button" onclick="myfunc()" value="JS传值"/>
20 </div>