我们在silverlight1.0 想调用javascript事件,直接在事件后写上函数名就可以,比如Loaded=SayHell, 但是在silverlight1.1 里是不行的,因为Silverlight1.1中一个XAML文件对应一个C#文件,和aspx与aspx.cs的对应关系一样,在XAML中可以定义一个Silverlight对象的事件代理,在对应的.xaml.cs文件中定义事件处理方法,在方法中可以操作XAML对象。但是如何为一个XAML对象定义一个JAVASCRIPT事件及事件处理方法呢?
在Silverlight1.1工程中一个Silverlight页面通常会有四个文件:html宿主文件及与之关联的html.js文件;XAML文件及与之对应的.xaml.cs文件。其中html宿主文件是一个普通的HTML文件用来作为Silverlight对象的容器,.html.js文件用会根据XAML文件来创建Silverlight对象显示在HTML文件中,XAML文件是一个基于XML格式的文件,用来定义Silverlight对象模型。
那么我们如何调用呢,以下就是示例:
1. 打开vs2008, 新建一个silverlight项目CallJavascript,默认生成如下文件
2. 在page.xaml的cavas下加入下面的代码
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/None.gif)
MouseLeftButtonDown ="mCallJsTextBlockOnClicked" TextWrapping ="Wrap" />
我们为这个对象设置了事件代理MouseLeftButtonDown="mCallJsTextBlockOnClicked"
最后代码会使这个样子
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/None.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/None.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/None.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/None.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/None.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/None.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/None.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/None.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/None.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/None.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/None.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/None.gif)
3. 修改page.xaml.cs
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/None.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/None.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/None.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/None.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/None.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/None.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/None.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/None.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/None.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/None.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/None.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/ContractedBlock.gif)
![](http://www.cnblogs.com/Images/dot.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/InBlock.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/InBlock.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/ContractedSubBlock.gif)
![](http://www.cnblogs.com/Images/dot.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/InBlock.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/InBlock.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/InBlock.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/ContractedSubBlock.gif)
![](http://www.cnblogs.com/Images/dot.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/InBlock.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/InBlock.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/InBlock.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/InBlock.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/ContractedSubBlock.gif)
![](http://www.cnblogs.com/Images/dot.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/InBlock.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/ContractedSubBlock.gif)
![](http://www.cnblogs.com/Images/dot.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/InBlock.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/ExpandedBlockEnd.gif)
引用 using System.Windows.Browser;
在C#文件中定义了Silverlight对象点击事件的处理方法,在这个方法里边会调用另一个事件,这个事件对象(onTextBlockClicked)有一个[Scriptable]标记,说明这个事件被定义为一个JS脚本事件,另外还要注意这个事件所在的类也要打上[Scriptable]标记,并且注册了一个脚本对象(在本例中是calljsObject)
4. 修改Testpage.html.js为
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/None.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/None.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/None.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/None.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/ContractedBlock.gif)
![](http://www.cnblogs.com/Images/dot.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/ContractedSubBlock.gif)
![](http://www.cnblogs.com/Images/dot.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/InBlock.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/InBlock.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/InBlock.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/ContractedSubBlock.gif)
![](http://www.cnblogs.com/Images/dot.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/InBlock.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/InBlock.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/InBlock.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/InBlock.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/ContractedSubBlock.gif)
![](http://www.cnblogs.com/Images/dot.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/InBlock.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/ContractedSubBlock.gif)
![](http://www.cnblogs.com/Images/dot.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/InBlock.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/ContractedSubBlock.gif)
![](http://www.cnblogs.com/Images/dot.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/InBlock.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/InBlock.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/ContractedSubBlock.gif)
![](http://www.cnblogs.com/Images/dot.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/InBlock.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/InBlock.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/InBlock.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/InBlock.gif)
![](http://images.cnblogs.com/cnblogs_com/cnblogsfans/Images/OutliningIndicators/ExpandedBlockEnd.gif)
可以看到这是一个标准的createSilverlight方法,但是不同的是我在这个方法的events参数中增加了一个onLoad事件,在这个事件中我对onTextBlockClicked事件进行了初始化,从这一句初始化代码可以看到calljsObject就是刚才我在C#文件中注册的脚本对象。这个事件的处理函数也可以写在一个独立的JS文件中,只要在Silverlight宿主文件中将其引用就可以了。
总结,silverlight1.1 其优势就是我们用托管代码如C#来写代码,这就造成了我们直接使用javascript比较繁琐,还好不是很繁琐,如果你不想用这个新特性而喜欢手写javascript,那还是用1.0吧