Silverlight与JavaScript相互调用

概述1.sl调用js 比如我们在页面中定义一个js函数: <script type="text/javascript">         function fnTest(msg) {             alert('fnTest：' + msg);         }     </script> sl中可以有二种调用方式: HtmlPage.Window.CreateInstance("fnTe

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" >
                <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight"
                    />
            </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://hi.baidu.com/dongdongjiao/blog/item/ed953eaf6d5f14f6fbed5091.html 附加一种情况：当只存在Silverlight 文件时，通过页面注册Js函数实现： （文章出处： http://www.51crazy.net/Article/205.aspx）

 Silverlight 3 调用Js函数

Silverlight像页面注册Js函数：

      string jsstr = "function callJs(msg){alert(msg);}";         @H_943_301@HTMLElement element = HTMLPage.document.CreateElement( "Script" );         element.SetAttribute( "type", "text/JavaScript" );         @H_943_301@element.SetAttribute( "text", jsstr );                  @H_943_301@HTMLPage.document.Body.AppendChild( element );       

调用Js函数：

      HTMLPage.Window.Invoke( "dragdrop", dcmexportRequest.ToString() );          @H_943_301@          ScriptObject callJs = (ScriptObject)HTMLPage.Window.GetProperty( "dragdrop" );          @H_943_301@callJs.InvokeSelf( dcmexportRequest.ToString() );        

调用Js参数或设置值:

HTMLWindow win = HTMLPage.Window;  @H_943_301@win.Alert( "Silverlight 里面d出的对话框。 " );  //执行页面中的Js函数：  @H_943_301@win.Eval( "getArraytest()" );  win.Eval( "var test=/"dfdsfgdsfgsfd/";" ); @H_553_419@ 总结

以上是内存溢出为你收集整理的Silverlight与JavaScript相互调用全部内容，希望文章能够帮你解决Silverlight与JavaScript相互调用所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。