通过托管代码来访问HTML DOM

作者：.silverlight.cn 2007-09-05

内容导航：

Dim ec1 As Boolean = btnEchoText.AttachEvent("onclick", AddressOf Me.OnEchoTextClicked)

【IT168技术文档】介绍
这个 QuickStart sample将演示如何在基于Silverlight的应用程序中使用托管代码通过编程的方式来访问HTML DOM和控制HTML页中的可视化元素 .访问HTML DOM可以让我们真正的使用NET Framework 代码来控制用户机器上的WEB页的UI等,而不用像以前一些服务端动态页面还需要回传服务器.

运行查看想要在基于Silverlight的应用程序中做到以上的功能,你需要准备以下步骤:

Handling XAML文件的根 Canvas Loaded 事件.

连接并且handling 一个事件 event 到HTML DOM 元素上.

访问HTML DOM的属性.

调用HTML DOM中的方法.

要求 (available from the Silverlight download site):

Microsoft Silverlight 1.1 Alpha.

Microsoft Visual Studio Code Name "Orcas" Beta 1.

Microsoft Silverlight Tools Alpha for Visual Studio Code Name "Orcas" Beta 1.

A Silverlight project. For instructions, see 怎么样来创建一个Silverlight Project.

处理 Silverlight XAML中的canvas中的一个事件
处理 XAML的 Loaded 事件,在 Canvas 建立好托管类和Web page之间的联系. 在XAML文件的 Loaded 属性中, 指定好该方法的名称,以便于你的托管代码进行事件处理. 在接下来的示例中e, Loaded 属性被赋值为OnLoaded, 它是和第二步中处理XAML事件过程相关的.

cs

<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Samples.Silverlight.CS.BasicCanvas;assembly=HtmlDOM1.dll"
x:Name="rootCanvas"
Height="500"
Width="500"
Loaded="OnLoaded"
Background="Red"
>
</Canvas>

<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="OnLoaded"
x:Class="HtmlDOM1.BasicCanvas;assembly=ClientBin/HtmlDOM1.dll"
Width="640"
Height="480"
Background="White"
>
</Canvas>

后台文件中添加一个方法,它的名称就是你在第一步中在XAML文件中指定的Loaded属性名称. 这个方法可以处理几乎所有初始化的任务, 创建和注册各种对象,关联事件等等.

cs

public void OnLoaded(object sender, EventArgs e)

Public Sub OnLoaded(ByVal sender As Object, ByVal e As EventArgs)

为了在事件处理方法中能访问HTML DOM ,请创建一个私有的, module-level 类型的变量 HtmlDocument 然后给其添加引用赋值为一个代表 HTML page的对象,当然,这个HTML page是Sivleright程序的宿主.接下来的 Onloaded 方法中的代码演示了这个步骤.

cs

document = HtmlPage.Document;

document = HtmlPage.Document

处理HTML DOM 元素的事件
在托管代码中得到HTML 元素的引用 . 想要实现这样的要求, 你可以使用刚创建的HTML document 对象的GetElementByID 方法,你只需要传入一个HTML elements的ID 进来就可以了. 接下来的 Onloaded 方法中的代码演示了如何得到HTML page中的 Echo Text button 的引用 .

cs

HtmlElement btnEchoText = document.GetElementByID("btnEchoText");

Dim btnEchoText As HtmlElement = document.GetElementByID("btnEchoText")

添加事件处理. 想要添加一个按钮的 OnClick 事件处理程序, 你需要得到这个button的引用 (你可以参照第一步来得到). 你可以添加事件就像下面示例中的Onloaded 方法一样.

cs

bool ec1 = btnEchoText.AttachEvent("onclick", new Eventhanlder<HtmlEventArgs>(this.OnEchoTextClicked));

Dim ec1 As Boolean = btnEchoText.AttachEvent("onclick", AddressOf Me.OnEchoTextClicked)

编写 event-handling 方法. 接下来的方法演示了如何申明一个私有方法来处理Echo Text button的事件 .

cs

private void OnEchoTextClicked(object sender, HtmlEventArgs e)

Private Sub OnEchoTextClicked(ByVal sender As Object, ByVal e As HtmlEventArgs)

访问HTML DOM中的属性
使用HTML DOM 对象的属性来得到关于它的信息. 比如,你可以使用 HtmlPage 对象的某些属性来得到当前页的Uniform Resource Identifier (URI),就像下面OnGetPropertiesClicked 方法中的代码一样.

cs

string outputText = HtmlPage.DocumentUri.AbsolutePath + " - " + HtmlPage.CurrentBookmark;

Dim outputText As String = HtmlPage.DocumentUri.AbsolutePath & " - " & _
HtmlPage.CurrentBookmark

给页面中的某些元素添加或改变属性值, 比如, 对于一个text box. 使用 SetAttribute 方法来设置已经和DOM element建立好引用关系的属性.接下来的OnGetPropertiesClicked 方法中的代码展示了指派URI串到第一步页面中得到的text box中.

cs

document.GetElementByID("txtOutputProperties").SetAttribute("value", outputText);

document.GetElementByID("txtOutputProperties").SetAttribute("value", outputText)

在HTML DOM中调用方法
得到一个你想调用的方法的HTML DOM 元素的引用.

直接调用得到的 DOM 方法. 比如,下面的示例调用 HtmlPage 的Navigate 方法来在我们点Jump to MSN时转向到其它链接地址.

cs

private void OnJump(object sender, EventArgs e)
{
HtmlPage.Navigate("http://www.msn.com");
}

Private Sub OnJump(ByVal sender As Object, ByVal e As EventArgs)
HtmlPage.Navigate("http://www.msn.com")
End Sub

原文地址

【内容导航】

第1页： 第1页

[责任编辑：webbtob]

[an error occurred while processing this directive]