在Silverlight1.1中定义与调用Javascript事件的方法
2008-02-20 13:19
561 查看
我们在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,默认生成如下文件
<TextBlock Width="314" Height="72" Canvas.Left="78" Canvas.Top="142" Text="Hello World"
MouseLeftButtonDown="mCallJsTextBlockOnClicked" TextWrapping="Wrap"/>
我们为这个对象设置了事件代理MouseLeftButtonDown="mCallJsTextBlockOnClicked"
最后代码会使这个样子
<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="Page_Loaded"
x:Class="CallJavascript.Page;assembly=ClientBin/CallJavascript.dll"
Width="640"
Height="480"
Background="White"
>
<TextBlock Width="314" Height="72" Canvas.Left="78" Canvas.Top="142" Text="Hello World"
MouseLeftButtonDown="mCallJsTextBlockOnClicked" TextWrapping="Wrap"/>
</Canvas>
3. 修改page.xaml.cs
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;
namespace CallJavascript
// JScript source code
//contains calls to silverlight.js, example below loads Page.xaml
function createSilverlight()
{
Silverlight.createObjectEx({
source: "Page.xaml",
parentElement: document.getElementById("SilverlightControlHost"),
id: "SilverlightControl",
properties: {
width: "100%",
height: "100%",
version: "1.1",
enableHtmlAccess: "true"
},
events: {
onLoad:function(sender,args)
{
sender.Content.calljsObject.onTextBlockClicked = function (sender, args)
{alert("Hello World, I am Jack_wangds");};
}
}
});
// Give the keyboard focus to the Silverlight control by default
document.body.onload = function() {
var silverlightControl = document.getElementById('SilverlightControl');
if (silverlightControl)
silverlightControl.focus();
}
}
可以看到这是一个标准的createSilverlight方法,但是不同的是我在这个方法的events参数中增加了一个onLoad事件,在这个事件中我对onTextBlockClicked事件进行了初始化,从这一句初始化代码可以看到calljsObject就是刚才我在C#文件中注册的脚本对象。这个事件的处理函数也可以写在一个独立的JS文件中,只要在Silverlight宿主文件中将其引用就可以了。
总结,silverlight1.1 其优势就是我们用托管代码如C#来写代码,这就造成了我们直接使用javascript比较繁琐,还好不是很繁琐,如果你不想用这个新特性而喜欢手写javascript,那还是用1.0吧
在Silverlight1.1工程中一个Silverlight页面通常会有四个文件:html宿主文件及与之关联的html.js文件;XAML文件及与之对应的.xaml.cs文件。其中html宿主文件是一个普通的HTML文件用来作为Silverlight对象的容器,.html.js文件用会根据XAML文件来创建Silverlight对象显示在HTML文件中,XAML文件是一个基于XML格式的文件,用来定义Silverlight对象模型。
那么我们如何调用呢,以下就是示例:
1. 打开vs2008, 新建一个silverlight项目CallJavascript,默认生成如下文件
<TextBlock Width="314" Height="72" Canvas.Left="78" Canvas.Top="142" Text="Hello World"
MouseLeftButtonDown="mCallJsTextBlockOnClicked" TextWrapping="Wrap"/>
我们为这个对象设置了事件代理MouseLeftButtonDown="mCallJsTextBlockOnClicked"
最后代码会使这个样子
<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="Page_Loaded"
x:Class="CallJavascript.Page;assembly=ClientBin/CallJavascript.dll"
Width="640"
Height="480"
Background="White"
>
<TextBlock Width="314" Height="72" Canvas.Left="78" Canvas.Top="142" Text="Hello World"
MouseLeftButtonDown="mCallJsTextBlockOnClicked" TextWrapping="Wrap"/>
</Canvas>
3. 修改page.xaml.cs
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;
namespace CallJavascript
// JScript source code
//contains calls to silverlight.js, example below loads Page.xaml
function createSilverlight()
{
Silverlight.createObjectEx({
source: "Page.xaml",
parentElement: document.getElementById("SilverlightControlHost"),
id: "SilverlightControl",
properties: {
width: "100%",
height: "100%",
version: "1.1",
enableHtmlAccess: "true"
},
events: {
onLoad:function(sender,args)
{
sender.Content.calljsObject.onTextBlockClicked = function (sender, args)
{alert("Hello World, I am Jack_wangds");};
}
}
});
// Give the keyboard focus to the Silverlight control by default
document.body.onload = function() {
var silverlightControl = document.getElementById('SilverlightControl');
if (silverlightControl)
silverlightControl.focus();
}
}
可以看到这是一个标准的createSilverlight方法,但是不同的是我在这个方法的events参数中增加了一个onLoad事件,在这个事件中我对onTextBlockClicked事件进行了初始化,从这一句初始化代码可以看到calljsObject就是刚才我在C#文件中注册的脚本对象。这个事件的处理函数也可以写在一个独立的JS文件中,只要在Silverlight宿主文件中将其引用就可以了。
总结,silverlight1.1 其优势就是我们用托管代码如C#来写代码,这就造成了我们直接使用javascript比较繁琐,还好不是很繁琐,如果你不想用这个新特性而喜欢手写javascript,那还是用1.0吧
相关文章推荐
- Silverlight 4 WebBrowser的使用及调用 WebBrowser 中的 javascript 方法
- 两种方法调用Bootstrap3的Javascript组件:data属性定义和书写JS代码
- HTML中使用JS调用Silverlight中定义的方法
- 从 JavaScript 调用silverlight方法
- javascript实现相同事件名称,不同命名空间的调用方法
- 在JavaScript里防止事件函数高频触发和高频调用的方法
- silverlight调用HTML中定义的JS方法
- JavaScript调用Activex控件的事件的实现方法
- JavaScript使用function定义对象并调用的方法
- javascript中,在一个类里attache的event事件中,如果调用类的成员变量和方法
- JavaScript调用Activex控件的事件的实现方法
- 基于JavaScript如何实现ajax调用后台定义的方法
- javascript、jQuery函数定义和调用方法
- Silverlight与javascript互调用方法总结
- javascript实现相同事件名称,不同命名空间的调用方法
- SilverLight浏览器交互之:Html页面通过Javascript调用SilverLight程序内方法(附源码)
- [Silverlight探秘]利用Javascript调用silverlight的方法
- JavaScript 调用后台事件和方法
- go语言使用go-sciter创建桌面应用(三) 事件处理,函数与方法定义,go与tiscript之间相互调用
- SilverLight浏览器交互之:SilverLight程序调用外部Html中的Javascript方法(附源码)