JavaScript窗口功能指南之创建弹出窗口

转载 2004年07月01日 10:42:00
标题     JavaScript窗口功能指南之创建弹出窗口    hktl(转贴)
关键字     JavaScript窗口功能
出处     http://www.ccidnet.com/tech/web/2001/01/19/58_1615.html

JavaScript窗口功能指南之创建弹出窗口
(作者:听风编译 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段的某个地方):

  <STYLE>

   .menu {position: absolute; top: -1000; left: -1000}

  </STYLE>

  我们执行菜单做为表格的链接:

  <TABLE CLASS=menuID=submenu>

   <TR><TD NOWRAP>

    <A HREF="names.html" TARGET="CONTENT">How to name your windows and frames</A>

   </TD></TR>

   <TR><TD NOWRAP>

    <A HREF="open.html">How to open a new window</A>

   </TD></TR>

   <TR><TD NOWRAP>

    <A HREF="features.html">How to specify the features of a new window</A>

   </TD></TR>

    <TR><TD NOWRAP>

    <A HREF="utilize.html">How to utilize the window features</A>

   </TD></TR>

   <TR><TD NOWRAP>

    <A HREF="exist.html">How to check if a window exists</A>

   </TD></TR>

   <TR><TD NOWRAP>

    <A HREF="reference.html">How to close a window</A>

   </TD></TR>

   <TR><TD NOWRAP>

    <A HREF="manipulate.html">How to manipulate a window</A>

   </TD></TR>

   <TR><TD NOWRAP>

    <A HREF="write.html">How to write content to a window</A>

   </TD></TR>

   <TR><TD NOWRAP>

    <A HREF="opener.html">How to reference the opener</A>

   </TD></TR>

   <TR><TD NOWRAP>

    <A HREF="dialog.html">How to create a dialog box</A>

   </TD></TR>

   <TR><TD NOWRAP>

    <A HREF="popup.html">How to create a pop-up window</A>

   </TD></TR>

   <TR><TD></TD></TR>

  </TABLE>

  链接本身(教程的页面)不会改变URL,但是当被点击时,就调用showMenu()函数:

  <A HREF='#' ONCLICK='showMenu(this, submenu)'>Tutorial's Pages</A>

  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个特殊类型的窗口:对话框和弹出窗口。

JavaScript窗口功能指南之创建弹出窗口

Internet Explorer 5.5支持一个新的window对象的方法:creatPopup()。你可以向下面一样创建一个弹出窗口:   var popupObj = window.create...
  • alex197963
  • alex197963
  • 2007年05月06日 00:26
  • 563

JavaScript窗口功能指南之创建对话框

 JavaScript支持几种内建的对话框:window.alert()、window.confirm()以及window.prompt()。当弹出一个对话框时,用户就不可以再聚焦到初始页面,除非对话...
  • caocg504
  • caocg504
  • 2008年04月11日 19:28
  • 182

JavaScript窗口功能指南之创建对话框

JavaScript支持几种内建的对话框:window.alert()、window.confirm()以及window.prompt()。当弹出一个对话框时,用户就不可以再聚焦到初始页面,除非对话框...
  • alex197963
  • alex197963
  • 2007年05月06日 00:31
  • 596

JavaScript窗口功能指南之操纵窗口

一旦你得到了表示窗口的变量,你就能通过各种方法来操纵它。在前面的介绍中,我们讨论过close()方法:   win = window.open("http://www.docjs.com/", "js...
  • alex197963
  • alex197963
  • 2007年05月06日 00:28
  • 493

JavaScript弹出模式窗口

解决思路:          一般来说,显示在最前面的窗口都是因为窗口被激活获得焦点,要使窗口永远显示在最前面,可以人为的设置窗口在blur时立刻focus,或者用模式、无模式对话框实现。    ...
  • lee576
  • lee576
  • 2008年04月04日 22:35
  • 9466

JavaScript弹出窗口以及窗口间的通信

们可以利用JavaScript穿件弹出窗口,并且可以控制它的许多属性,甚至还可以在两个窗口之间通信。 本网页JavaScript代码 本网页JS,只有一个函数,它负责打开一个300*300的网页...
  • xingxing513234072
  • xingxing513234072
  • 2012年07月20日 16:05
  • 1849

javascript弹出自定义窗口

  【2、经过设置后的弹出窗口】    下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。 我们来定制这个弹出的窗口的外观,尺寸大小,弹出的位置以适应该页面的具体情况。       ...
  • changmengmeng
  • changmengmeng
  • 2010年08月24日 11:41
  • 2700

JavaScript窗口功能指南之定制新窗口

window.open()方法的基本语法结构是:     window.open(sURL, sName);   然而,你可以通过使用2个附加的参数定制新窗口:   window.open(sURL,...
  • alex197963
  • alex197963
  • 2007年05月06日 00:27
  • 525

JavaScript窗口功能指南之关闭窗口

当你创建了一个新窗口时,将open()方法的返回值分配给一个变量非常重要。比如,下面的语句就是创建一个新窗口,然后立即关闭它:   win = window.open("http://www.docj...
  • wangfuying
  • wangfuying
  • 2006年09月09日 16:54
  • 693

JavaScript窗口功能指南之关闭窗口

当你创建了一个新窗口时,将open()方法的返回值分配给一个变量非常重要。比如,下面的语句就是创建一个新窗口,然后立即关闭它:   win = window.open("http://www.docj...
  • dadunqingwa
  • dadunqingwa
  • 2005年01月10日 13:42
  • 1028
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript窗口功能指南之创建弹出窗口
举报原因:
原因补充:

(最多只允许输入30个字)