Silverlight如何与JS相互调用

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 onclick="fnClickTest()">调用SL中的方法</button>
 
 
 
说明:SilverlightLoaded会在silverlight控件加载完成时触发，触发完了以后，slCtl这个全局变量就保留了对silverlight的引用，其它地方就能继续调用silverlight中的各种方法和属性了


作者：菩提树下的杨过
 出处：http://yjmyzz.cnblogs.com 
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。