[转]Silverlight与Html/Javascript互操作

摘要:

先介绍一下System.Windows.Browser命名空间下的几个类, 接着介绍Silverlight如何操纵Html元素, 最后介绍如何从Javascript调用Silverlight的方法, 以及Silverlight调用Javascript方法.

1.System.Windows.Browser

Silverlight 提供了一组对象来描述Html文档对象模型(DOM), 包括HtmlPage, HtmlDocument, HemlElement, HtmlElementCollection, 等等. 我们可以通过这些对象从Silverlight访问Html页面的内容, 如获取某个Html元素, 导航到新的URL等.(ps:Silverlight 1.1 Complete API List )

首先看HtmlPage类, 其提供了浏览器信息的静态属性BrowserInformation;提供的静态方法Navigate, 可以方便的跳转到其他的web页.提供了Document属性访问Html Dom, 有了它就可以干很多事了

HtmlDocument/HemlElement类用来访问DOM, 有了DOM就可以像Javascript一样做任何事了.

注意: 如果需要Silverlight可以访问Html页面的内容, 在创建Silverlight控件的时候必须将enableHtmlAccess设为true.

2.Silverlight操纵Html

想象Javascript是怎么访问Html元素的, Silverlight也同样可以.

修改页面属性:如修改页面标题, HtmlPage.Document.SetProperty(“title”, “new title”);

操纵html元素:

HtmlElement elem =  HtmlPage.Document.GetElementByID(“btn”);
elem.SetAttribute(“value”, “haha”);
elem.GetAttribute(“value”);

elem.AttachEvent(“onclick”, delegate(object sender, HtmlEventArgs he){
// …
});

3.Javascript调用Silverlight方法

Javascript要想调用Silverlight, Silverlight必须通过DOM提供给Javascript一个可操作的对象.

新建一个silverlight项目, 修改Page.xaml.cs如下:

using System;
using System.Windows;
using System.Windows.Browser;
using System.Windows.Controls;

namespace SilverlightProject1
{
[Scriptable]
public partial class Page : Canvas
{
public void Page_Loaded(object o, EventArgs e)
{
// Required to initialize variables
InitializeComponent();

WebApplication.Current.RegisterScriptableObject(“js”, this);
}

[Scriptable]
public string CalledByJs(string name)
{
return “i’m silverlight, called by ” + name;
}
}
}

修改TestPage.html如下:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
http://www.w3.org/1999/xhtml” >

好 像还不支持Silverlight方法返回一个复杂类型, 不过还好Silverlight内置了json的支持, 使用System.Windows.Browser.Serialization命名空间下JavascriptSerializer序列化一下就ok 了.

4.Silverlight调用Javascript方法

Silverlight无法直接调用javascript方法, 不过可以利用事件, 在Silverlight里抛出事件, 在javascript响应该事件.

修改Page.xaml如下:

xmlns=”http://schemas.microsoft.com/client/2007
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml
Loaded=”Page_Loaded”
x:Class=”SilverlightProject1.Page;assembly=ClientBin/SilverlightProject1.dll”
Width=”640″
Height=”480″
Background=”White”
>

修改Page.xaml.cs如下:

using System;
using System.Windows;
using System.Windows.Browser;
using System.Windows.Controls;
using System.Windows.Input;

namespace SilverlightProject1
{
[Scriptable]
public partial class Page : Canvas
{
public void Page_Loaded(object o, EventArgs e)
{
// Required to initialize variables
InitializeComponent();

WebApplication.Current.RegisterScriptableObject(“js”, this);
}

protected void OnClick(object sender, MouseEventArgs e)
{
if (this.CallJs != null )
{
EventHandler temp = this.CallJs;
temp(this, EventArgs.Empty);
}
}

[Scriptable]
public event EventHandler CallJs;
}
}

修改TestPage.html.js:在onLoad事件里添加了对Silverlight抛出的CallJs 事件的响应.

// 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 : OnLoaded}
});
// Give the keyboard focus to the Silverlight control by default
document.body.onload = function() {
var silverlightControl = document.getElementById(‘SilverlightControl’);
if (silverlightControl)
{
silverlightControl.focus();
}
}
}

function OnLoaded(sender, args)
{
sender.Content.js.CallJs = calledBySL;
}

function calledBySL(sender, args)
{
alert(“i’m js, called by silverlight”);
}

done!

我尝试了在Silverlight事件里加了自定义的参数, javascript这边好像接收不到??不知道是什么原因.

总结:

Silverlight与Javascript的互操作的方式和Flex类似, 不过个人还是喜欢Silverlight的方式, C#的语法简单清晰.

参考资料:

[Silverlight探秘]深入探索Silverlight与Javascript的交互

Silverlight 访问html元素



Leave a Comment

电子邮件地址不会被公开。 必填项已用*标注