爬虫的足迹

在IE里创建可覆盖ActiveX控件的DHTML菜单

1月 20, 2007 2:13 上午 | 发表在 DHTML | 留下评论

对于很多面向企业用户的网页，使用下拉式菜单是很自然的事情。企业用户通常习惯于使用MS Windows类型的用户界面，下拉式菜单是最习惯的界面元素之一。下拉式菜单有很多种，有基于DHTML的，有基于Applet的, 也有基于ActiveX控件的。其中DHTML菜单对大部分应用是最合适的。因为相对于另外两种菜单，它对客户端没有特别的要求。Applet和ActiveX菜单都需要在客户端安装对象，特别Applet还要求安装庞大的JVM，这对很多客户都不能接受。另外随着IE对安全级别的提高，用户需要修改浏览器的安全设置，这也是很多企业级用户不能接受的。而DHTML菜单唯一的要求只要浏览器支持Javascript,现在基本上所有的浏览器都支持，所以成为最合适的菜单选择。但DHTML菜单也不是没有缺点，其中一个就是下拉的菜单不能覆盖ActiveX控件。当下拉的菜单碰到ActiveX控件的时候，IE会把ActiveX控件显示在最上面，这样菜单就会被截断。没有谁会需要这样的方式，所以为了解决这个问题，很多人就会宁愿选用Applet或ActiveX菜单。

问题的根源在于IE对控件的处理方式上。每个网页的显示元素都有一个z-index值，当多个元素重叠的时候，IE通过使用z-index来决定谁覆盖谁。z-index高的元素会覆盖z-index低的元素。听起来似乎只要给菜单项一个高的z-index值就可以解决上面的问题。不是那么简单。问题就在IE对普通HTML元素和控件的z-index是分开处理的。不管HTML元素的z-index值多高，只要和控件有重叠，就会被控件覆盖。

对IE为什么要这样做非常困惑，但反正我们对于微软的类似做法早已是见多了，所以也就见怪不怪了。但问题还是要解决，Applet菜单对我是绝对不可接受的。 为了一个菜单强迫客户安装十几兆的JVM，估计产品会都被退货。

所幸的是还有一个IFrame。IFrame在IE的z-index显示结构里面地位很特别。它横跨两边。普通HTML元素显示会把它计算在内，控件显示也会考虑它。这样，我们就可以利用IFrame把控件挡在下面而显示菜单。简单地说，我们可以给控件z-index为1，创建一个和菜单一样大小的IFrame,并且设它的z-index为2，然后菜单的z-index为3。这样的话，菜单就可以成功地显示在控件上面。

IFrame可以直接用HTML来些，只要保证它的大小和上面的菜单项大小一样就可以了。一个事例代码可以是：

<IFRAME style="DISPLAY:none;LEFT:0px;POSITION:absolute;TOP:0px" src="javascript:false;" frameBorder="0" scrolling="no">
</IFRAME>

在src里面放置javascript:false的目的是防止IFrame试图载入文件。

在真正的菜单开发上，更有可能用到是动态地生成IFrame.这可以使用insertAdjacentHTML()来做到。然后可以通过改变IFrame的style来调整它的尺寸，位置和显示与否。下面的CSS属性可能会用到。

<em>iframe</em>.style.top
<em>iframe</em>.style.left
<em>iframe</em>.style.width
<em>iframe</em>.style.height
<em>iframe</em>.style.zIndex
<em>iframe</em>.style.display

如果你决定不自己开发（明智的决定，开发并维护一个菜单其实是一件耗力的事情，想想这么多的浏览器版本就知道是一件多麻烦的事了），而采用现成的菜单的话。在决定使用某一个产品之前，你可能会想知道它是否支持ActiveX控件。答案有点出人意料，支持的其实很少。在我测试过的产品中，免费的只有Yahoo的YUI支持，付费的有milonic 和 sothink支持。在YUI中，缺省 的设置只支持IE6及以下版本的，所以如果你需要支持IE7，在代码里面把菜单项的iframe设为true就可以了。另外，ActiveX控件需要放在跟菜单不同的IFrame里。不确定为什么会这样，但测试的结果是这样.