Silverlight与JS相互调用

1.sl调用js

比如我们在页面中定义一个js函数:

<script type="text/javascript">@H_502_11@        function fnTest(msg) {@H_502_11@            alert('fnTest：' + msg);@H_502_11@        }@H_502_11@    </script>

sl中可以有二种调用方式:

HtmlPage.Window.CreateInstance("fnTest","CreateInstance");

或者

HtmlPage.Window.Invoke("fnTest","Invoke");

运行的效果完全相同，但是建议用Invoke方法，原因是:

CreateInstance是HtmlWindow中定义的方法，而HtmlWindow继承自HtmlObject，再向上找HtmlObject又继承ScriptObject，最终调用的还是ScriptObject中的Invoke方法，所以用CreateInstance绕来绕去，最终还是绕到了Invoke上，还不如一步到位直接Invoke更高效。

@H_502[email protected]修改dom元素属性

比如页面中有一个文本框: <input type="text" id="txtTarget" name="txtTarget" />

sl中同样也有二种方法调用:

HtmlPage.Document.GetElementById("txtTarget").SetAttribute("value","Silverlight");@H_502[email protected]("txtTarget").SetProperty("value","Silverlight");

功能完全相同，同样建议用SetProperty方法，理由同上@H_502_11@

3.sl为dom元素附加事件@H_502_11@@H_502[email protected]("txtTarget").AttachEvent("focus",new EventHandler(AttachJsMethod));@H_502_11@@H_502_11@private void AttachJsMethod(object o,EventArgs e)@H_502_11@{@H_502_11@   HtmlPage.Window.Invoke("fnTest","silverlight");@H_502_11@}

@H_502_11@以上代码将为txtGarget文本框附加onfocus事件处理函数:fnTest

 

4.js调用sl中的方法，属性@H_502_11@@H_502_11@sl部分的关键处理是：要在暴露出来的方法/属性前加上[ScriptableMember()]，参考下面的代码：

[ScriptableMember()]@H_502_11@public string Hello(string Msg)@H_502_11@{@H_502_11@    return "Hello," + Msg;@H_502_11@}

@H_502_11@[ScriptableMember()]@H_502_11@public void Test(string msg)@H_502_11@{@H_502_11@    MessageBox.Show("From Silverlight：" + msg);@H_502_11@}

@H_502_11@private string _myName = "";

[ScriptableMember()]@H_502_11@public string MyName { set { _myName = value; } get { return _myName.Length == 0 ? "MyName Test" : _myName; } }

 

这里定义二个方法(一个有返回值，一个没返回值)，外加一个属性

 

然后要在App.Xaml.cs中注册类型，参考下面这样:

private void Application_Startup(object sender,StartupEventArgs e)@H_502_11@{@H_502_11@            MainPage mp = new MainPage();@H_502_11@            this.RootVisual = mp; @H_502_11@            HtmlPage.RegisterScriptableObject("myMainPage",mp);

}

 

js中这可以使用了，不过得先给silverlight的object标签加一个参数，参考下面这样：@H_502_11@<object data="data:application/x-silverlight-2," type="application/x-silverlight-2"@H_502_11@            width="100%" height="100%">@H_502_11@            <param name="source" value="ClientBin/JavaScriptInvoke.xap" />@H_502_11@            <param name="onError" value="onSilverlightError" />@H_502_11@            <param name="background" value="white" />@H_502_11@            <param name="minRuntimeVersion" value="3.0.40818.0" />@H_502_11@            <param name="onLoad" value="SilverlightLoaded" />@H_502_11@            <param name="autoUpgrade" value="true" />@H_502_11@            <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0" style="text-decoration: none">@H_502_11@                <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight"@H_502_11@                    style="border-style: none" />@H_502_11@            </a>@H_502_11@        </object>

@H_502_11@然后定义对应的函数:

@H_502_11@<script type="text/javascript">

　　  var slCtl = null;

        function SilverlightLoaded(sender) {@H_502_11@            slCtl = sender.getHost();@H_502_11@            alert(slCtl.Content.myMainPage.Hello("JavaScript"));@H_502_11@        }

 

 

　　var fnClickTest = function() {@H_502_11@            if (slCtl != null) {@H_502_11@                slCtl.Content.myMainPage.Test("Hi")

                alert(slCtl.Content.myMainPage.MyName);@H_502_11@            }@H_502_11@        }

 </script>

为了测试fnClickTest，可以在页面中加一个button，类似这样:

<button onclick="fnClicktest()">调用SL中的方法</button>

 

说明:SilverlightLoaded会在silverlight控件加载完成时触发，触发完了以后，slCtl这个全局变量就保留了对silverlight的引用，其它地方就能继续调用silverlight中的各种方法和属性了