1.sl調用js

比如我們在頁面中定義一個js函數:

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

sl中可以有二種調用方式:

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

或者

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

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

CreateInstance是HtmlWindow中定義的方法，而HtmlWindow繼承自HtmlObject，再向上找HtmlObject又繼承ScriptObject，最終調用的還是ScriptObject中的Invoke方法，所以用CreateInstance繞來繞去，最終還是繞到了Invoke上，還不如一步到位直接Invoke更高效。

2.sl修改dom元素屬性

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

sl中同樣也有二種方法調用:

HtmlPage.Document.GetElementById("txtTarget").SetAttribute("value", "Silverlight");
HtmlPage.Document.GetElementById("txtTarget").SetProperty("value", "Silverlight");

功能完全相同，同樣建議用SetProperty方法，理由同上

3.sl為dom元素附加事件

HtmlPage.Document.GetElementById("txtTarget").AttachEvent("focus", new EventHandler(AttachJsMethod));

private void?AttachJsMethod(object o, EventArgs e)
{
?? HtmlPage.Window.Invoke("fnTest", "silverlight");
}

以上代碼將為txtGarget文本框附加onfocus事件處理函數:fnTest

?

4.js調用sl中的方法，屬性

sl部分的關鍵處理是：要在暴露出來的方法/屬性前加上[ScriptableMember()]，參考下面的代碼：

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

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

private string _myName = "";

[ScriptableMember()]
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)
{
??????????? MainPage mp = new MainPage();
??????????? this.RootVisual = mp;?
????????????HtmlPage.RegisterScriptableObject("myMainPage", mp);

}

?

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

然后定義對應的函數:

<script type="text/javascript">

　　? var slCtl = null;

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

?

?

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

??????????????? alert(slCtl.Content.myMainPage.MyName);
??????????? }
??????? }

?</script>

為了測試fnClickTest，可以在頁面中加一個button，類似這樣:

<button?οnclick="fnClickTest()">調用SL中的方法</button>

?

說明:SilverlightLoaded會在silverlight控件加載完成時觸發，觸發完了以后，slCtl這個全局變量就保留了對silverlight的引用，其它地方就能繼續調用silverlight中的各種方法和屬性了

總結

以上是生活随笔為你收集整理的Silverlight如何与JS相互调用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。