前段时间写了Flex和JavaScript互操作, 本篇介绍Silverlight和Html/Javascript的互操作性.当然Silverlight可以使用多种托管语言, 我这里使用C#.
摘要:
先介绍一下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如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Silverlight Project Test Page </title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="TestPage.html.js"></script>
<style type="text/css">
.silverlightHost { width: 640px; height: 480px; }
</style>
<script type="text/javascript">
function callSL()
{
var control = document.getElementById("SilverlightControl");
var manager = control.Content.js;
alert( manager.CalledByJs('js') );
}
</script>
</head>
<body>
<div id="SilverlightControlHost" class="silverlightHost" >
<script type="text/javascript">
createSilverlight();
</script>
</div>
<input id="btn" type="button" value="call silverlight method" onclick="callSL()" />
</body>
</html>
好像还不支持Silverlight方法返回一个复杂类型, 不过还好Silverlight内置了json的支持, 使用System.Windows.Browser.Serialization命名空间下JavaScriptSerializer序列化一下就ok了.
4.Silverlight调用Javascript方法
Silverlight无法直接调用javascript方法, 不过可以利用事件, 在Silverlight里抛出事件, 在javascript响应该事件.
修改Page.xaml如下:
<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="SilverlightProject1.Page;assembly=ClientBin/SilverlightProject1.dll"
Width="640"
Height="480"
Background="White"
>
<TextBlock Text="call js method" MouseLeftButtonDown="OnClick"/>
</Canvas>
修改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元素