Silverlight怎么样与JS相互调用

那是一个silverlight游戏:http://keleyi.com/keleyi/phtml/silverlight/

1.sl调用js

接了个单子,非要用Silverlight
5来作一个品种,此前一直没接触过那东西,为了职业,硬着头皮也要上了。探索了一晚上,大至整理出有些体系中须求的事物,以下作为初探记录:

举例我们在页面中定义四个js函数:

Silverlight 5与Javascript的交谈格局

<script type=”text/javascript”>
        function fnTest(msg)
{
            alert(‘fnTest:’ + msg);
        }
    </script>

Silverlight
5属于客商端的事物,客商端的事物与劳务器端调换,第一时间想到了基于javascript的ajax这几个万能胶,所以先从Silverlight
5与Javascript交互方式出手。

sl中得以有三种调用格局:

一、Silverlight 5发言,Javascript倾听

HtmlPage.Window.CreateInstance(“fnTest”, “CreateInstance”);

从Silverlight 5里向Javascript发送程序运维须要。
Silverlight 5端代码具体如下: 

或者

HtmlPage.Window.Invoke(“Javascript函数情势”, “传值-Oyiboy”);

HtmlPage.Window.Invoke(“fnTest”, “Invoke”);

由此以上代码能够直接在Silverlight
5里运转Javascript的台本代码,并发送必要的数目出来。

运作的效果完全同样,不过提议用Invoke方法,原因是:

二、Javascript发言,Silverlight 5倾听

CreateInstance是HtmlWindow中定义的法子,而HtmlWindow承袭自HtmlObject,再升华找HtmlObject又持续ScriptObject,最终调用的恐怕ScriptObject中的Invoke方法,所以用CreateInstance绕来绕去,最后依旧绕到了Invoke上,还比不上一步到位直接Invoke更连忙。

Javascript使用ajax获取服务器端数据后发送给Silverlight
5,以达到Silverlight 5与服务器端的互动作效果用。
Silverlight 5端代码具体如下:

2.sl修改dom元素属性

//设置值
[ScriptableMember()]//这行是任重(Ren Zhong)而道远,必得有其一javascript手艺必要到这一个方法
public void setVal(string D)
{
this.textView.Text = D;
}
//javascript主动供给再次回到值
[ScriptableMember()]
public string returnVal()
{
return this.textView.Text;
}

比方页面中有二个文本框: <input type=”text” id=”txtTarget”
name=”txtTarget” />

Html代码调度:
供给在Silverlight
5插件的object代码内里增多以下参数设置句,以达成插件在加载后收获siliverlight对象。

sl中一样也可以有二种情势调用:

<param name=”onLoad” value=”siliverLoaded” />

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

Javascript代码具体如下:

作用完全一样,同样提出用SetProperty方法,理由同上

//siliverlight对象
var siliverlightObj = null;
//上面那个HTML代码内设置的Silverlight 5 onLoad事件触发的函数
function siliverLoaded(sender, args) {
siliverlightObj = sender.getHost();
}

//以下代码中的.buttonSet和.buttonReu是两个带这些class的按钮,按钮就不详细写出来了
//这个是运行Silverlight 5内的setVal方法
$(".buttonSet").click(function () {
siliverlightObj.Content.Main.setVal("javascript传入值-Oyiboy");
})
//这个是运行Silverlight 5内的returnVal方法
$(".buttonReu").click(function () {
alert(siliverlightObj.Content.Main.returnVal());
});
// hovertree.com

3.sl为dom成分附加事件

 

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

如上多少个艺术,灵活接纳的活基本上就完全消除了Silverlight
5与劳动器端之间的调换,好呢,尽管那篇的事物的主旨是Silverlight
5与Javascript,但说起底指标如故Silverlight
5与劳务器端的互相,反正ajax亦不是何等新物,所以就跳过了。

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

感想:通过Silverlight
5的对象siliverlightObj.Content.Main这一大窜东西来看,siliverlightObj还是能够作越来越多的事了,具体还要稳步搜索了,借使今后有亟待运用的话,还会出这些的验证文章吧,恐怕。

如上代码将为txtGarget文本框附加onfocus事件管理函数:fnTest

补漏: 
关于siliverlightObj.Content.Main中的Main是指在Silverlight
中app.xaml的Application_Startup事件中登记的拜望名称,具体代码如下:

 

private void Application_Startup(object sender, StartupEventArgs e)
{
this.RootVisual = new MainPage();
System.Windows.Browser.HtmlPage.RegisterScriptableObject(“Main”,
this.RootVisual);
}

4.js调用sl中的方法,属性

从代码中可见,假如有七个xaml页的话,只要在那边登记区别的名称就足以援用不一致xaml页内证明的Javascript方法了。 
刚巧整理代码时在应用软件.xaml发掘那句代码才纪念把那么些给漏了,前几日补回。

sl部分的严重性管理是:要在爆出出来的艺术/属性前拉长[ScriptableMember()],参谋下边的代码:

silverlight加密:http://keleyi.com/tool/md5.htm

[ScriptableMember()]
public string Hello(string Msg)
{
    return “Hello ,” + Msg;
}

转自:http://hovertree.com/h/bjaf/silverlight5.htm

[ScriptableMember()]
public void Test(string msg)
{
    MessageBox.Show(“From Silverlight:” + msg);
}

silverlight数字时钟:
图片 1

private string _myName = “”;

http://roucheng.cnblogs.com/

[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中的各个艺术和属性了