Silverlight与html网页、javascript交互

4.8 网页交互


Silverlight应用程序并不是孤立存在的,通常宿主在ASP.NET网站中,由aspxhtml网页承载。因此SilverlightASP.NET网站的交互,与HTML元素以及JavaScript函数的交互非常重要。

4.8.1 参数传递

在实际的应用程序中,经常需要从配置文件传递参数,在Silverlight应用中,传递参数可以通过插件对象的initParams属性指定,也可以从查询字符串获取。

n
initParams方式:

²
ApplicationStartup 事件中通过StartupEventArgs 参数获取。

²
在程序其他位置以App.Current.Host.InitParams 属性获取。

² 示例:

 

下面代码指定了一个初始化参数,MapServiceUrl

<object
data="data:application/x-silverlight-2,"
type="application/x-silverlight-2" width="100%"
height="100%">

<param
name="source" value="ClientBin/MapExport.xap"/>

<param
name="initParams" value="MapServiceUrl=<%=

ConfigurationManager.AppSettings["MapServiceUrl"]%>"/>

<param
name="onError" value="onSilverlightError" />

<param
name="minRuntimeVersion" value="4.0.50826.0" />

<param
name="autoUpgrade" value="true" />

</object>

初始化参数调用:

private
void Application_Startup(object sender, StartupEventArgs e)

{
string url = e.InitParams["MapServiceUrl"];

this.RootVisual
= new MainPage(url);

}

n 查询字符串方式:

即通过HtmlDocument.QueryString直接获取HTML页面的查询参数。

4.8.2 HTML访问Silverlight

HTML访问Silverlight,主要通过事件机制来实现。主要步骤如下:

1) HTML中声明HTML元素:

<input
id="btnChangeBackground" value="
改变SL背景" type="button" />

2) Silverlight中注册按钮事件:

 HtmlElement
btnChangeBackground=HtmlPage.Document.GetElementById(

"btnChangeBackground");

btnChangeBackground.AttachEvent("onclick",
new EventHandler<

HtmlEventArgs>(btnChangeBackground_Click));

3) 添加事件处理函数逻辑:

 void btnChangeBackground_Click(object sender, HtmlEventArgs e)

{

HtmlElement
button = sender as HtmlElement;

LayoutRoot.Background
= new SolidColorBrush(Colors.Black);

}

4.8.3 Silverlight访问HTML

Silverlight中,HtmlPage表示HTML页面,HtmlElement表示HTML元素,通过HtmlPage.Document.GetElementById获取要调用的HTML元素,然后执行相应的操作。

示例:

HtmlElement txtTitle = HtmlPage.Document.GetElementById("txtTitle");

txtTitle.SetAttribute("value",
"
通过Silverlight设置的值");

txtTitle.SetAttribute("fontSize",
12);

4.8.4 JavaScript访问Silverlight

JavaScript函数访问Silverlight中的对象、方法,主要步骤如下:

1) 首先在HTML中为Silverlight插件对象指定名称:

<object
id="SLObject" data="data:application/x-silverlight-2,"
type="application/x-silverlight-2" width="75%"
height="100%">

2) HTML元素指定事件处理函数:

 <input
id="btnTurnLeft" value="
向左转动" type="button"
onclick="turnCircle(true)"/>

3) 在事件处理函数中调用Silverlight对象:

 

function
turnCircle(isLeft) {

var slobj = document.all('SLObject');

slobj.content.SLDataAccess.TurnImage(isLeft);

}



4) 编写Silverlight中的函数(注意ScriptableMember标记了该函数可在脚本中调):



[ScriptableMember]

public
void TurnImage(bool bLeft)

{

„„

}


5) Silverlight代码中注册脚本函数:


 HtmlPage.RegisterScriptableObject("SLDataAccess",
this);

4.8.5 Silverlight访问JavaScript

Silverlight代码中也可以调用网页中的JavaScript函数,通过页面的Invoke方法,或者脚本对象的InvokeSelf方法均可。



n 页面调用方式:

tmlPage.Window.Invoke("showMessage",
"Silverlight
中通过页面调用");

n 脚本对象方式:

ScriptObject
jsObj =
(ScriptObject)HtmlPage.Window.GetProperty("showMessage");

jsObj.InvokeSelf("Silverlight中通过脚本对象调用");

n JavaScript函数:

 

function
showMessage(message) {

alert(message);
}



posted @ 2012-05-25 17:36  周文  阅读(784)  评论(0编辑  收藏  举报