IE6.0中window.open之怪现象

传说の黄花菜

浏览: 202164 次
性别:
来自: 杭州

最近访客更多访客>>

yuyu1984

myblog1122

吖龙Sam

coolpest

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

JavaScript HTML prototype

最近项目中遇到很奇怪的一个现象，不知道各位以前有没遇到过，就是在一个新打开的子窗口上使用了一个div遮罩，但是问题来了，就是在父窗口上不断地点击超链接，则不断地弹出新的子窗口，也就是点了几下，则弹出几个新子窗口，但是在window.open中的name参数是一样的，按理是在父窗口上点击超链接，只是在第一次弹出的子窗口中不断地刷新页面。这让我很是困惑。

这是从http://www.w3school.com.cn网站上的一段关于window.open的描述。

事实上，在一般情况下也确实如此，但是这此的情况却有点特殊，请看代码：

mainWindow.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>mainwindow</title>
</head>
<body class="bodyBackground">
<a href="#" onclick='openWin()'>click it</a>
<script type="text/javascript" >

<!--
function openWin() {
	window.open('childWindow.html', 'win', 'height=600, width=1000, toolbar=no,location=yes, menubar=no, resizable=yes,scrollbars=yes');

}
//-->

</script>

</body>
</html>

childWindow.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>childWindow</title>

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

</head>

<body class="bodyBackground">

<div id="test" style="border: 0pt none ; width: 500px; height: 500px; text-align: center;">
	<p>asdasdasd</p>
	<p>asdasdasd</p>
	<p>asdasdasd</p>
	<p>asdasdasd</p>
	<p>asdasdasd</p>
	<p>asdasdasd</p>
	<p>asdasdasd</p>
	<p>asdasdasd</p>
	<p>asdasdasd</p>
	<p>asdasdasd</p>
</div>
<input type="button" onclick="mask.mask();" value="open" />
<input type="button" onclick="mask.unmask()" value="close" />
</body>
</html>

最后是Mask.js:

var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}
//mask class
var Mask = Class.create();
Mask.prototype = {

	maskDiv: document.createElement("div"),
	maskComponent: null,
	
	initialize: function() {
		document.body.appendChild(this.maskDiv);
	},
	
	init : function(maskComponentId, showMsg) {
		this.maskComponent = document.getElementById(maskComponentId);
		this.maskDivId = this.maskDiv.id = 'maskDiv';
		this.maskDiv.innerHTML = showMsg;	

		/*
		var styles = {
		    "border": "1px solid gray",
		    "position": "absolute",
		    "height": this.maskComponent.offsetHeight + 'px',
		    "width": this.maskComponent.offsetWidth + 'px',
		    "top": this.getTop(this.maskComponent) + 'px',
		    "left": this.getLeft(this.maskComponent) + 'px',
		    "backgroundColor": "gray",
		    "color": "white",
		    "fontSize": "24px",
		    "fontFamily": "Aria",
		    "fontWeight": "bold",
		    "indexZ": 999,
		    "textAlign": "center",
		    "verticalAlign": "middle",
		    "display": "none"
		}
		for (name in styles)
			this.maskDiv.style[name] = styles[name];
		*/
		
		    this.maskDiv.style["border"] = "1px solid gray";
		    this.maskDiv.style["position"] = "absolute";
		    this.maskDiv.style["height"] = this.maskComponent.offsetHeight + 'px';
		    this.maskDiv.style["width"] = this.maskComponent.offsetWidth + 'px';
		    this.maskDiv.style["top"] = this.getTop(this.maskComponent) + 'px';
		    this.maskDiv.style["left"] = this.getLeft(this.maskComponent) + 'px';  
		    this.maskDiv.style["backgroundColor"] = "gray";
		    this.maskDiv.style["color"] = "white";
		    this.maskDiv.style["fontSize"] = "24px";
		    this.maskDiv.style["fontFamily"] = "Aria";
		    this.maskDiv.style["fontWeight"] = "bold";
		    this.maskDiv.style["indexZ"] = 999;
		    this.maskDiv.style["textAlign"] = "center";
		    this.maskDiv.style["verticalAlign"] = "middle";
		    this.maskDiv.style["display"] = "none";
		    //this.setOpacity(this.maskDivId, 0.5);
		
	},
	
	mask: function(){
		this.maskDiv.style["height"] = this.maskComponent.offsetHeight + 'px';
    this.maskDiv.style["width"] = this.maskComponent.offsetWidth + 'px';
    this.maskDiv.style["top"] = this.getTop(this.maskComponent) + 'px';
    this.maskDiv.style["left"] = this.getLeft(this.maskComponent) + 'px'; 
    this.maskDiv.style["display"] = "block"; 
	},
	
	unmask: function() {
		this.maskDiv.style["display"] = "none";
	},
	
	getTop: function(e){
		var offset=e.offsetTop;
		if(e.offsetParent!=null) offset+=this.getTop(e.offsetParent);
		return offset;
	},
	
	getLeft: function(e){
		var offset=e.offsetLeft;
		if(e.offsetParent!=null) offset+=this.getLeft(e.offsetParent);
		return offset;
	}

}

var mask = null;
function init() {
	mask = new Mask();
	mask.init('test', 'Loading...');
}

var oldonload = window.onload; 

if (typeof window.onload != 'function') { 
	window.onload = init; 
} else { 
	window.onload = function() { 
		oldonload(); 
		init(); 
	} 
}

这样的情况下是完全正常的，不管在mainWindow.html上点击“click it”这个超链接多少次，他总是会在第一个弹出的子窗口刷新页面。我们也可以在子窗口的地址栏输入：javascript:alert(window.name) 进行查看，如下图：

window.name确实也为‘win’。

但是当我们把Mask.js中init方法改为如下：

var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}
//mask class
var Mask = Class.create();
Mask.prototype = {

	maskDiv: document.createElement("div"),
	maskComponent: null,
	
	initialize: function() {
		document.body.appendChild(this.maskDiv);
	},
	
	init : function(maskComponentId, showMsg) {
		this.maskComponent = document.getElementById(maskComponentId);
		this.maskDivId = this.maskDiv.id = 'maskDiv';
		this.maskDiv.innerHTML = showMsg;	

		
		var styles = {
		    "border": "1px solid gray",
		    "position": "absolute",
		    "height": this.maskComponent.offsetHeight + 'px',
		    "width": this.maskComponent.offsetWidth + 'px',
		    "top": this.getTop(this.maskComponent) + 'px',
		    "left": this.getLeft(this.maskComponent) + 'px',
		    "backgroundColor": "gray",
		    "color": "white",
		    "fontSize": "24px",
		    "fontFamily": "Aria",
		    "fontWeight": "bold",
		    "indexZ": 999,
		    "textAlign": "center",
		    "verticalAlign": "middle",
		    "display": "none"
		}
		for (name in styles)
			this.maskDiv.style[name] = styles[name];
		
		/*
		    this.maskDiv.style["border"] = "1px solid gray";
		    this.maskDiv.style["position"] = "absolute";
		    this.maskDiv.style["height"] = this.maskComponent.offsetHeight + 'px';
		    this.maskDiv.style["width"] = this.maskComponent.offsetWidth + 'px';
		    this.maskDiv.style["top"] = this.getTop(this.maskComponent) + 'px';
		    this.maskDiv.style["left"] = this.getLeft(this.maskComponent) + 'px';  
		    this.maskDiv.style["backgroundColor"] = "gray";
		    this.maskDiv.style["color"] = "white";
		    this.maskDiv.style["fontSize"] = "24px";
		    this.maskDiv.style["fontFamily"] = "Aria";
		    this.maskDiv.style["fontWeight"] = "bold";
		    this.maskDiv.style["indexZ"] = 999;
		    this.maskDiv.style["textAlign"] = "center";
		    this.maskDiv.style["verticalAlign"] = "middle";
		    this.maskDiv.style["display"] = "none";
		    //this.setOpacity(this.maskDivId, 0.5);
		*/
	},
	
	mask: function(){
		this.maskDiv.style["height"] = this.maskComponent.offsetHeight + 'px';
    this.maskDiv.style["width"] = this.maskComponent.offsetWidth + 'px';
    this.maskDiv.style["top"] = this.getTop(this.maskComponent) + 'px';
    this.maskDiv.style["left"] = this.getLeft(this.maskComponent) + 'px'; 
    this.maskDiv.style["display"] = "block"; 
	},
	
	unmask: function() {
		this.maskDiv.style["display"] = "none";
	},
	
	getTop: function(e){
		var offset=e.offsetTop;
		if(e.offsetParent!=null) offset+=this.getTop(e.offsetParent);
		return offset;
	},
	
	getLeft: function(e){
		var offset=e.offsetLeft;
		if(e.offsetParent!=null) offset+=this.getLeft(e.offsetParent);
		return offset;
	}

}

var mask = null;
function init() {
	mask = new Mask();
	mask.init('test', 'Loading...');
}

var oldonload = window.onload; 

if (typeof window.onload != 'function') { 
	window.onload = init; 
} else { 
	window.onload = function() { 
		oldonload(); 
		init(); 
	} 
}

问题就来了，我们不断地在mainWindow.html上点击‘click it’，他会不断地跳出新的子窗口，于是我在每个子窗口的地址栏输入：javascript:alert(window.name) ，发现他们的window.name竟然都是一样的！如下图: