关于关闭js窗口对象的问题

Question

我已用js模拟出一个层的window窗口,右上角有"关闭"的叉叉按钮,我点关闭后,窗口是不见了,我用的方法是:win.style.display = "none";
这样好像是把"这个窗口"消毁了,其实,这个窗口对象依然存在!我如何做到真正的消毁它呢?(注:设为none隐藏了,但内存还存在,我若不定时强出窗口,内存显然会泄漏)或者,我如何做到,改变已生成的窗口的属性呢?即,类似java中的win.setTitle("标题"),来改变这个窗口的标题呢?试了好久,没成功,不知道,已经生成的js对象,
是否可以改变它的属性?这个应该可以的,但改变属性后,并不能使已生成的窗口变化为新的属性(如标题改为新的标题).可能表述不是很好,不知道大家是否明白我的意思,大侠们先看看吧,若不是很清楚,我整理下代码再贴放上去吧,多谢了.

Answer 1

用div作窗口对象.你就可以控制div内所有的对象.

Answer 2

window.showModalDialog

Answer 3

可以，做一个setTitle的方法来改变win的标题。

Answer 4

首先感谢大家的参与,为了表述更直观,我把代码贴出来吧,我就是用div作窗口对象的了,但真不知道怎么控制,麻烦各位大虾们能直接帮我改正问题吧.js学得不好,可能这个问题并不难,但不会就是难啊.//这是test.js代码
var x0 = 0;//鼠标点击时的x坐标
var y0 = 0;//鼠标点击时的y坐标
var x1 = 0;//鼠标移动后的x坐标
var y1 = 0;//鼠标移动后的y坐标
var offx = 0;//鼠标单击时窗体向左倾斜距离
var offy = 0;//鼠标单击时窗体向上倾斜距离
var moveFlag = false;//是否移动窗体
var hover = 'black';//
var normal = 'royalblue';//设置color
var index = 1;//z-index //开始拖动
function startDrag(obj)
{
  if (event.button == 1)
  {
   obj.setCapture();//锁定标题栏,releaseCapture来解除   
   var win = obj.parentNode;//定义对象(返回指定节点的父节点)
   var sha = win.nextSibling;//指对象后面下一个对象的引用   
   //记录鼠标和层位置
   x0 = event.clientX;
   y0 = event.clientY;
   x1 = parseInt(win.style.left);//窗体距x坐标为0距离
   y1 = parseInt(win.style.top);//窗体距y坐标为0距离
  
   normal = obj.style.backgroundColor;//记录颜色
   //改变风格
   obj.style.backgroundColor = normal;//hover 
   win.style.borderColor = normal;
   obj.nextSibling.style.color = hover;//内容颜色
   sha.style.left = x1 + offx;
   sha.style.top  = y1 + offy;
   moveFlag = true;  
   index = index + 1;//设置层最前面
  }
}
//拖动
function drag(obj)
{
if (moveFlag)
{
  var win = obj.parentNode;
  var sha = win.nextSibling;
  
  win.style.left = x1 + event.clientX - x0;
  win.style.top = y1 + event.clientY - y0;
  sha.style.left = parseInt(win.style.left) + offx;
  sha.style.top  = parseInt(win.style.top) + offy;   
}
}
//停止拖动
function stopDrag(obj)
{
 if (moveFlag)
 {
  var win = obj.parentNode;
  var sha = win.nextSibling;
  var msg = obj.nextSibling;
  win.style.borderColor = normal;  
  obj.style.backgroundColor = normal;
  msg.style.color = hover;
  sha.style.left = obj.parentNode.style.left;   
  sha.style.top = obj.parentNode.style.top;
  sha.style.right = obj.parentNode.style.right;   
  sha.style.bottom = obj.parentNode.style.bottom;   
  obj.releaseCapture();//解除锁定标题栏
  moveFlag = false;//停止拖动后搬运标志设置为假
 }
}
//获得焦点
function getFocus(obj)
{
 if (obj.style.zIndex != index)
 {
  var idx = index;
  obj.style.zIndex = idx;
  obj.nextSibling.style.zIndex = idx - 1;
 }
}
//最小化;
function min(obj)
{
 var win = obj.parentNode.parentNode;
 var sha = win.nextSibling;
 var tit = obj.parentNode;
 var msg = tit.nextSibling;
 var flg = msg.style.display == "none";
 
 if (flg)
 {
  win.style.height  = parseInt(msg.style.height) + parseInt(tit.style.height) + 2 * 2;
  sha.style.height  = win.style.height;
  msg.style.display = "block";
  obj.innerHTML = "0";
 }
 else
 {
  win.style.height  = parseInt(tit.style.height) + 2 * 2;
  sha.style.height  = win.style.height;
  obj.innerHTML = "2";
  msg.style.display = "none";
 }
}//关闭
function cls(obj)
{
var win = obj.parentNode.parentNode;
var sha = win.nextSibling;
win.style.display = "none";
sha.style.display = "none";
}//创建一个window对象
function xWin(id, width, height, right, bottom, title, message)
{
var bodyWidth = document.body.clientWidth;
var bodyHeight = document.body.clientHeight;
this.index   = index;
this.id      = id;
this.width   = width;
this.height  = height;
this.left    = bodyWidth - width;
this.top     = bodyHeight - height;
this.right   = right;
this.bottom  = bottom;
this.zIndex  = index;
this.title   = title;
this.message = message;
this.obj     = this;
this.bulid   = bulid;
this.bulid();
}//初始化
function bulid()
{
var str = ""
+ "<div id=xMsg" + this.id + " "
+ "style='"
+ "z-index:" + this.zIndex + ";"
+ "width:" + this.width + ";"
+ "height:" + this.height + ";"
+ "right:" + this.right + ";"
+ "bottom:" + this.bottom + ";"
+ "left:" + this.left + ";"
+ "top:" + this.top + ";"
+ "background-color:" + normal + ";"
+ "font-size: 9pt;"
+ "font-family: Verdana;"
+ "position: absolute;"
+ "cursor: default;"
+ "border: 2px solid " + normal + ";"
+ "' "
+ "onmousedown='getFocus(this)'>"//获取焦点
+ "<div "
+ "style='"
+ "background-color:" + normal + ";"
+ "width:" + (this.width - 2 * 2) + ";"
+ "height: 20;"
+ "color: white;"
+ "cursor: move;"
+ "' "
+ "onmousedown='startDrag(this)' "//鼠标按下
+ "onmouseup='stopDrag(this)' "//鼠标离开
+ "onmousemove='drag(this)' "//鼠标移上
+ "ondblclick='min(this.childNodes[1])'"
+ ">"
+ "<span style='width: " + (this.width - 2 * 12 - 4) + ";padding-left: 3px;color: white;'>" + this.title + "</span>"
+ "<span style='width: 12;border-width: 0px;color: white;font-family: webdings;cursor: default;' onclick='min(this)'>0</span>"
+ "<span style='width: 12;border-width: 0px;color: white;font-family: webdings;cursor: default;' onclick='cls(this)'>r</span>"
+ "</div>"
+ "<div style='"
+ "width: 100%;"
+ "height:" + (this.height - 20 - 4) + ";"
+ "background-color: white;" 
+ "line-height: 18px;"
+ "font-size: 9pt;"
+ "word-break: break-all;"
+ "padding: 5px;"
+ "'>" + this.message + "</div>"
+ "</div>"
+ "<div style='"
+ "width:" + this.width + ";"
+ "height:" + this.height + ";"
+ "top:" + this.top + ";"
+ "left:" + this.left + ";"
+ "right:" + this.right + ";"
+ "bottom:" + this.bottom + ";"
+ "z-index:" + (this.zIndex - 1) + ";"
+ "position: absolute;"
+ "background-color: black;"
+ "filter: alpha(opacity = 40);"
+ "'>by wildwind</div>";

document.body.insertAdjacentHTML("beforeEnd", str);
}
<!--这是test.jsp代码-->
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>    
    <title>My JSP 'test.jsp' starting page</title>
    
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script type="text/javascript" src="js/test.js"></script>

  <script type="text/javascript">  
  <!--   
window.setInterval("refresh();", 5000);//每5秒更新一次
   var b = null;//全局的变量,整个过程只允许b一个窗体对象
function refresh()
{
if (b == null)
{
b = new xWin("1", 240, 200, 0, 0, "标题1", "消息1");
}
else
{
                //这里b不为空,说明窗体对象已存在,我如何做到操作b对象使之改变标题和内容呢?下面做法会新生成一个窗体对象,很怪,b我不是设置为全局了吗?为何还无效呢?
b.title = "标题2";
b.message = "消息2";
b.bulid   = bulid;
b.bulid();
}

}
  //-->
  </script>
    
  </head>
  
  <body>
    要达到的效果是:第一次强出标题为"标题1"内容为"消息1"会被之后弹出的窗体对象被"标题2","消息2"覆盖掉.现在的情况是并没有覆盖掉,而是不断强出窗体.
  </body>
</html>
说明:代码可直接使用,想要的效果是后生成的窗体履盖之前生成的窗体,而这里对象b已作为全局变量了,为何还是无效呢?请js大虾们指教.

Answer 5

像一楼说的用个div做外套封装一下，呵呵。
帮你up，接点分。

Answer 6

document.body.insertAdjacentHTML("beforeEnd", str);//主要是你这句话的问题
oElement = object . insertAdjacentElement ( sWhere , oElement ) 
参数：
oElement  : 必选项。对象(Element)。要插入到 object 邻近的对象。
 
sWhere  : 必选项。字符串(String)。beforeBegin | afterBegin | beforeEnd | afterEnd beforeBegin  : 将 oElement 插到 object 的开始标签之前。 
afterBegin  : 将 oElement 插到 object 的开始标签之后。但是在 object 的所有原有内容之前。 
beforeEnd  : 将 oElement 插到 object 的结束标签之前。但是在 object 的所有原有内容之后。 
afterEnd  : 将 oElement 插到 object 的结束标签之后。 
 
你改成document.body.innerHTML = str;

Answer 7

还有两点:
1.代码兼容性不好
2.var bodyWidth = document.body.clientWidth;
  var bodyHeight = document.body.clientHeight;
  // 上面两行代码 如果加上DTD文档 就会不准确
  
可以改成这样:
var $d = document.compatMode == "BackCompat" ? d = document.body : d = document.documentElement;var bodyWidth = d.clientWidth;
var bodyHeight = d.clientHeight;

Answer 8

哇 ，好长，建议还是用div吧 
那样或许会更好获取到属性

Answer 9

document.body.insertAdjacentHTML("beforeEnd", str);
==>
var div = document.createElement("div");
div.innerHTML = str;
document.body.appendChild(div);关闭时使用
document.body.removeChild(win.parentNode);

Answer 10

divObj.removeNode(1) //divObj窗体层对象