内容面板

这一节我们来看看如何向HTML页面或者其他XUL文件中添加面板。

添加子面板

你可能经常想要使用不同页面的文件中的一部分。有时候你或许想将一个窗口中的一部分进行改变。一个很好的例子是一个一步接一步的向导，可以通过很多页面、询问一系列问题来指导你。每当用户点击下一步按钮的时候，向导就会显示下一个画面。

你可以通过为每个不同的画面打开一个新的窗口来创建向导。但这样有三个问题。首先，每个窗口会出现在不同的位置。第二，后退和下一步按钮都是一样的，如果这是内容区域变化将会更好。第三，当在不同的窗口中运行的时候使用脚本会非常困难。

注意，XUL有一个wizard元素可以用来创建向导接口。这将会在后面的章节中进行描述。

另一种方法是使用iframe元素。这与HTML中有相同的名字。它可以在一个窗口中创建独立的文档。其优点是可以在任何需要内容的地方加载不同的文件。将文档的URL设置这个框架的src属性。这个URL可以指向任意类型的文件，尽管通常是指向一个HTML文件或者其他XUL文件。你可以使用脚本来控制iframe中的内容而不需要影响主窗口。

在mozilla浏览器中，网页显示的区域就是用iframe创建的。当用户输入一个URL或者点击一个文档的链接的时候，这个frame的资源就变化了。

Iframe例子

例子1：

这个例子为浏览器创建了一个非常简单的接口。创建了一个格子来容纳两个元素，一个是工具栏一个是iframe。一个后退按钮，一个前进按钮，以及一个用来输入URL的输入区。在iframe里面将会出现一个网页。这里会默认的出现index.html文件。

这个例子功能并不完全。下面我们将会添加一个脚本在需要的时候来改变src属性，例如当用户按回车键的时候。

 browser

还有一种内容面板，使用browser标签。如果你想创建一个像浏览器一样显示内容的框架就可以使用这个元素。事实上iframe也可以完成这样的功能，但是browser又很多附加特性。例如browser可以保持历史页面用来进行前进和后退。Browser还可以加载带有参照页和其他标志的页面。需要的时候，你可以使用browser标签来常见一个像浏览器一样的接口，但是如果只需要一个简单的面板的话可以使用iframe来实现。

一个类似的元素tabbrowser，可以提供browser的全部功能而且还提供一个tab标签来在多个页面中切换。这是用在mozilla浏览器中的标签页浏览的小工具。元素tabbrowser事实上提供了一个含有一系列browser的tabbox元素。两种类型的browser都提供了相同的页面显示控制方式。

Browser实例

例子2：

与iframe一样，你可以使用src属性来指定browser的URL。对tabbrowser，你不可以设置直接像这样设置URL，因为他不会仅仅显示一个URL，相反的，你必须使用脚本调用loadURL函数来实现。

有三种类型的browser，基于你想要显示的内容的内部机制。可以使用type属性来指定其类型。

第一种类型如果不指定的话是默认的类型。这种情况，加载内容的内部browser就是与应用程序相同的，而且可以在外部窗口中访问。这意味着当一个脚本在browser内部加载文件的时候会获取最顶层的窗口。，会获得XUL窗口中的最外部的窗口。

这可能对于一个应用程序的子XUL面板比较合适，但是当你想要用browser来加载网页的时候，就不是你想要的了。相反的，你可能想现限制网页仅仅获取网页的内容，你可能注意到mozilla浏览器窗口的工具条和状态条有一个XUL内容以及更高级的tabbrowser组成了主要的区域。这个内部的区域显示了一个网页，但是网页无法访问其周围的XUL。这是因为使用的是第二种类型的browser，指定type属性为content。这可以阻止内容穿越到XUL窗口中，示例如下：

元素tabbrowser的每个标签页在创建的时候默认类型都设置为content。因此你不需要明确的为它指定类型。

第三种类型在你的程序中包含多个browser元素的时候使用的，例如，你有一个侧边栏来显示额外的内容，将主browser元素的type属性设置为content-primary来表明其内容是窗口中的主内容。这与content值一样，只是里面的内容只有使用XUL窗口的content属性才可以访问。这使得用脚本访问主窗口的内容时变得容易。对tabbrowser自动将可见的browser设置为content-primary，也就是说，这样你总是可以在当前可见的窗口中看到内容。

下一节，我们看看如何创建分隔线