如何在一堆框架（Frame）上弹出div层

框架Frame，不知道现在还有多少人会用，至少我学用html到现在，只是知道有这种东西存在，却没见到也没用到过。上周终于碰到个机会让我一窥框架是个啥东西，然后由于项目的需要，我得做个div层置于所有的框架之上，做成下拉菜单的效果。折腾了一下，就记在这里吧。

第一个DEMO展示的是框架，点击这里查看。

用框架来布局这种后台管理类的界面，结构上非常清晰，维护上也应该比较方便，因为每个框架里展示的页面是独立的。但是在一堆frameset和frame上要浮动起一个div层来，我试了一下，基本上行不通。当然，这应该是我水平不够，听凯尔同学说是有办法的，具体我没过问。

那么我把文章标题定成这个，太不负责任了？呵呵，其实我的解决方法是变通一下。既然用frameset和frame搞不定，为什么不用和它们相似的iframe元素来变通一下解决问题呢？我用的就是iframe法。

第二个DEMO展示一个弹出菜单，点击顶部导航中的最后一项“后台导航”即可看到弹出菜单，点击这里查看。

大家应该知道，无论是frame还是iframe中，载入的都是另外一个页面，那么在载入的子页面中弹出的层是无论如何都不可能覆盖到其父元素（iframe）之上的。不过我们需要做的就是欺骗一下用户的眼睛。所以那个弹出层其实是在另外一个iframe中，它属于父iframe所在的那个网页。这样来描述可能有点晕，下面用一张图来说明一下。

图中黑色半透明区域示意的是整个网页结构，在浏览器中载入的话，就是index.html。然后这个页面里有三个iframe，上面的一个载入index_top.html，左边载入的是index_menu.html，右边载入的是index_body.html。代码如下：

<div id="top" style="z-index:1">
        <iframe src="index_top.html" scrolling="no" height="63" width="100%" frameborder="0"></iframe>
</div>
<div id="bottom" style="z-index:1">
    <iframe id="left_menu" src="index_menu.html" scrolling="no" width="176" frameborder="0"></iframe>
    <iframe id="right_body" src="index_body.html" scrolling="auto" frameborder="0"></iframe>
</div>

这里用行内样式来指定z-index的值，是为了方便弹出的层。本来应该是在index_top.html中，点击一下按钮就弹出一个层的，但是弹出层不会跑出外部的iframe，所以肯定不能这样。因此我在index.html里面新增加了一个div和iframe，让弹出的层显示在div#top和div#bottom之上，再让index_top.html里点击的动作触发一下index.html里面的js函数，以达到弹出的效果。代码如下：

<div id="popupmenu">
    <iframe allowtransparency="true" src="index_show.html" scrolling="auto" width="100%" height="100%" frameborder="0"></iframe>
</div>
<div id="top" style="z-index:1">
    <iframe src="index_top.html" scrolling="no" height="63" width="100%" frameborder="0"></iframe>
</div>
<div id="bottom" style="z-index:1">
    <iframe id="left_menu" src="index_menu.html" scrolling="no" width="176" frameborder="0"></iframe>
    <iframe id="right_body" src="index_body.html" scrolling="auto" frameborder="0"></iframe>
</div>

初始状态肯定不能让弹层显示，所以用css控制显示为不可见，display:none。另外请注意div#popupmenu里面那个iframe行内的allowtransparency属性，没有它，IE6下弹出层背景不是透明的。之后再写一个简单的js函数，让点击的时候切换一下display的值。代码如下

function showPop(){
	document.getElementById("popupmenu").style.display = 'block';
}
function closePop(){
	document.getElementById("popupmenu").style.display = 'none';
}

最后就是把这个函数绑定到按钮上了，代码如下：

<a href="#" onclick="parent.window.showPop();return false;">后台导航</a>

上面代码包含了子iframe中调用父文档中javascript的方法。虽然我推荐使用分离式的html和javascript，不过这里只是举个例子，所以使用的是行内的动作绑定。

后来我看了几个网站的这种界面，比如QQ邮箱、网易邮箱、WordPress后台管理页面，有的是用div模拟的框架（WP后台），有的也是iframe（QQ邮箱），也有用table来模拟的（网易邮箱），而不是frameset和frame，不过随便怎么样解决都行，结构清晰，便于维护就是好代码。

最后留下的问题就是，我的解决方法在Linux下的Chrome dev版本中无效（其他没测），残念……