Silverlight与浏览器通信技术总结1：Silverlight访问HTML DOM

Silverlight是浏览器的一个插件，运行在浏览器的Sand Box中。Silverlight与浏览器之间的访问，有时会给编程带来很大便利。本系列的目的是总结Silverlight与浏览器互访的技术及应用，作为实际开发时的参考。首先来看Silverlight如何访问HTML DOM。

HTML DOM(Document Object Model)定义了标准的方法来操作HTML文档，它是树形结构的。在Silverlight中你可以通过HtmlPage.Document对象直接与HTML DOM进行交互。HtmlPage类允许访问和操作浏览器的HTML DOM，通过这个类你还可以访问浏览器的其他特性，例如浏览器信息等。这个类在System.Windows.Browser命名空间。HtmlPage.Document返回对象类型HtmlDocument，通过这个对象可以访问HTML DOM.

private void SendMessage(string message) 
{ 
      HtmlDocument doc = HtmlPage.Document; 
      HtmlElement element = doc.GetElementById("message"); 
      if (element != null) 
      { 
            element.SetProperty("innerHTML", message); 
      } 
}

HtmlDocument类提供了各种方法和属性来管理HTML文档： 

Body - 访问HTML文档body，可以改变它的属性或者child elements等。
Cookies - 获取或设置当前站点的cookie信息。
QueryString - 获得当前站点的query string collection。
GetElementById(...) - 通过id来获得HTML element。
GetElementsByTagName(...) - 通过tag名字来获得一组HTML element。 

 

另外一个重要的类是HtmlElement:

Children - 获得当前HTML element的所有child elements。
CssClass - 获取或设置HTML element的class属性，通过它可以很容易的操作HTML element的style。
SetAttribute(...) - 改变当前HTML element的Attribute值。
SetProperty(...) - 改变当前HTML element的Property值。
SetStyleAttribute(...) - 改变HTML element的style attribute值。

 

是不是对HTML的Attribute和Property的区别有点困惑？每一个HTML element都有一个Property，在DOM树中可以看到。这些Property可以通过JavaScript或其他脚本语言来访问。而Attribute用于HTML声明中，例如：<table width="100%">。每一个Attribute都有一个Property相对应，反之则不一定，因此Attribute相当于Property子集。

 

通过上面介绍可以看到，Silverlight访问HTML DOM十分简单，源代码请在这里下载。

在线演示：http://rpg.yingyuantown.com/AccessHtmlDomProjectTestPage.html

 

在本系列后面将给出一些具体应用实例，敬请期待，谢谢。

 

update:

如果你不希望silverlight访问HTML DOM，可以在silverlight object中设置参数：

<param name="enablehtmlaccess" value="false"/>