使用Popup窗口创建无限级Web页菜单(2)

    上次我说到要使用popup在web中创建无限级菜单,两个要解决的问题是多个popup窗口共存和popup中的事件的处理。其中多个popup共存的问题我已经讲了可以使用popup.document的parentWindow来再createPopup,这个就算搞定了,而第二个问题就有些让人讨厌了,为什么呢?

    我们通过createPopup创建的popup对象包含了一个document属性,document其实就是html的容器。MSDN说:构建popup的DHTML可以存储在其父document或其他的document中。这个话真是让人不明白,其实就是说我们可以使用popup.document.body去append别的DHTML内容,比如:popup.document.body.innerHTML = '...'或popup.document.body.appendChild(...)。这里又遇到了popup的一些怪异的特性,我们发现:
var win = window;
var doc = win.document; 
var popup = win.createPopup();
var popdoc = popup.document;
var popwin = popdoc.parentWindow;
var popwindoc = popwin.document; 
    结果popdoc != popwindoc,这都没什么了,不等就不等把,可是当我们调用popdoc.write和popwindoc.write后,去发现执行结果是一样的,即数据被写入了popup窗口中。不过还好这里也不影响我们的菜单实现,就是怪异罢了。

    上面的popdoc和popwindoc引用虽然不同,不过执行效果却相同,都能按我们预期的效果修改popup。可是接下来我们发现popup.document.body的appandChild方法和innerHTML属性向popup里添加DHTML内容的效果就大不同了,这个不同和给我带了很多的麻烦,使菜单的逻辑数据(JavaScript构建的菜单类)与UI表现(HTML元素构建的菜单的可视外观)以及它们之间的事件传递变得乱糟糟的

    我们有两个方法向popup里添加html内容,一个是使用popup.document.body的innerHTML直接把html代码赋到body中去;另一个办法是使用popup.document.body的appendChild方法对dom进行操作。这里要注意,必须使用popup自己的document对象来创建DHTML元素,才能使用appendChild来添加。比如我上面代码中的popdoc和popwindoc虽然引用不相等,但是确实是popup的doucment对象,使用他们来createElement得到的对象,才能被appendChild到popup里去。如果是使用doc来createElement得到的对象,在popup.docuemnt.body上去appendChild会得到一个运行时错误:Error: Invalid argument.。

    为什么啰里啰唆说了半天appendChild方法和innerHTML属性呢?因为他们各有各的好处,如果使用appendChild这种方式,我们可以在创建菜单类的数据的时候,使菜单的逻辑数据(JavaScript实现的类)和UI显示元素(HTML)之间彼此引用起来,这样在我们处理菜单事件的时候,会使程序和整个执行结构都变得比较清晰(这个在菜单处理事件的时候,我会再详细说)。这样一说,我们当然应该使用这种方法来append我们的菜单的内容了,可是我们又遇到了popup一个让人抓狂的问题。使用popup.document.body.appendChild方法把DHTML内容导入后,我们事先赋给DHMTL元素的属性有些会失效,其中包括nowrap, onstartselect, rules等,这三个属性的失效,十分严重的影响了菜单UI的呈现,下图就是使用appendChild后popup窗口里得到的效果,左边是在IE里我们希望的正确效果。 

    

    所以不得不放弃了appendChild方法的使用,改用popup.document.body.innerHTML直接赋值html的办法,可是这种方法就不能在对象引用关系上建立菜单逻辑数据和UI元素之间的联系,因为对象引用虽然能被存储在html元素的属性中,可是当以字符串方式来复制html元素时,html元素上attach的事件和属性里存放的对象引用就都丢失了,所以只能使用另外的办法来关联他们。于是我们实现了一个叫__MenuCache__的类似hash table的全局类来管理它们之间的一一对应关系。 

    to be continued ...

posted on 2004-12-12 06:09  birdshome  阅读(...)  评论(...编辑  收藏

导航