当前页面: 开发资料首页 → Javascript 专题 → JavaScript窗口功能指南之创建弹出窗口
JavaScript窗口功能指南之创建弹出窗口
摘要: JavaScript窗口功能指南之创建弹出窗口
<table border=0 cellPadding=0 cellSpacing=0 height=237 width=760>
（作者：听风编译 2001年01月19日 11:35）
Internet Explorer 5.5支持一个新的window对象的方法：creatPopup（）。你可以向下面一样创建一个弹出窗口：
var popupObj = window.createPopup();
当你创建了这个对象后，弹出窗口并不显示。你必须要调用它的show方法：
popupObj.show(yOffset, xOffset, width, height, referenceObj)
在这里：
yOffset 是弹出窗口距离屏幕左上角的水平偏移。
xOffset 是弹出窗口距离屏幕左上角的垂直偏移。
width 是弹出窗口的宽度。
height 是弹出窗口的高度。
referenceObj 是一个可选参数，它替代屏幕左上角做为引用yOffset 和 xOffset 的参照。
让我们示范一下新的弹出窗口的用处。如果你点击下面的链接，一个所有这个教程的菜单就会弹出来。注意，当菜单弹出时，页面就滚动回到它的顶部。我们怎么样执行这个弹出窗口呢？首先，你需要定义一个可见菜单，它随后会被转载进弹出菜单。为了实现隐藏链接，可以将菜单放置到一个隐藏的位置。我们选择位置（－1000，－1000），并在菜单的style标记中定义它（在HEAD段的某个地方）：
我们执行菜单做为表格的链接：
<table CLASS=menuID=submenu>
<tr><td NOWRAP>
How to name your windows and frames
</td></tr>
<tr><td NOWRAP>
How to open a new window
</td></tr>
<tr><td NOWRAP>
How to specify the features of a new window
</td></tr>
<tr><td NOWRAP>
How to utilize the window features
</td></tr>
<tr><td NOWRAP>
How to check if a window exists
</td></tr>
<tr><td NOWRAP>
How to close a window
</td></tr>
<tr><td NOWRAP>
How to manipulate a window
</td></tr>
<tr><td NOWRAP>
How to write content to a window
</td></tr>
<tr><td NOWRAP>
How to reference the opener
</td></tr>
<tr><td NOWRAP>
How to create a dialog box
</td></tr>
<tr><td NOWRAP>
How to create a pop-up window
</td></tr>
<tr><td></td></tr>
</table>
链接本身（教程的页面）不会改变URL，但是当被点击时，就调用showMenu（）函数：
Tutorial's Pages
showMenu（）函数有2个参数，一个是链接对象，它调用函数，另一个是菜单的ID。我们要采取的第一个行为是分配弹出窗口的body对象：
var popupBodyObj = popupObj.document.body;
然后，设置边界为1象素，紫色，固体样式：
popupBodyObj.style.border = "1px purple solid";
填充弹出窗口的内容绝不是一个琐碎的工作，实现的一个方法就是使用innerHTML和outerHTML：
popupBodyObj.innerHTML = menuID.outerHTML;
接着，我们需要对页面的所有链接指派onClick事件处理程序，定义这个事件的响应函数为doclick。
for (var i = 0; i < popupBodyObj.all.length; i++) {
if (popupBodyObj.all[i].tagName == "A")
popupBodyObj.all[i].onclick = doClick;
}
下面是showMenu（）函数的全部代码：
function showMenu(linkObj, menuID) {
var popupObj = window.createPopup();
var popupBodyObj = popupObj.document.body;
popupBodyObj.style.border = "1px purple solid";
popupBodyObj.innerHTML = menuID.outerHTML;
for (var i = 0; i < popupBodyObj.all.length; i++) {
if (popupBodyObj.all[i].tagName == "A")
popupBodyObj.all[i].onclick = doClick;
}
popupObj.show(0, linkObj.offsetHeight, menuID.offsetWidth, menuID.offsetHeight, linkObj);
}
函数的最后一条语句是显示弹出窗口。我们将弹出窗口放置于调用它的链接linkObj旁边。如果你省略了这个引用，弹出窗口将参照屏幕左上角被放置。水平偏移是0。为了避免窗口弹出时链接被隐藏，我们要设置对于链接高度的垂直偏移，linkObj.offsetHeight。很自然，我们设置窗口的宽度和高度为初始菜单的宽度(menuID.offsetWidth)和高度(menuID.offsetHeight)。
函数doClick（）是一个2行代码的程序，它修改当前窗口的URL（parent.href）为点击链接的URL（this）：
function doClick() {
parent.location = this.href;
return false;
}
总结
在这个教程中，我们试图覆盖JavaScript有关窗口相关特征的大多数内容。我们给你展示了如何根据你的要求打开一个新窗口，怎样在窗口中写内容，操纵它，关闭它。同时，我们介绍了如何引用打开窗口的父窗口。最后，我们接触到2个特殊类型的窗口：对话框和弹出窗口。
<td height=12 width=15></td></tr></table> </td> </tr> <tr> <td vAlign=top align=left height="100%">
↑返回目录
前一篇: JavaScript窗口功能指南之定制新窗口
后一篇: JavaScript窗口功能指南之打开一个新窗口