IE6.0中window.open之怪现象

最新推荐文章于 2024-06-25 09:31:38 发布

最新推荐文章于 2024-06-25 09:31:38 发布 · 168 阅读

文章标签：

#JavaScript #HTML #prototype #ViewUI

javascript 专栏收录该内容

4 篇文章

订阅专栏

探讨在使用window.open方法时，因遮罩层实现方式不同导致预期单窗口刷新行为变为重复打开多个子窗口的问题。通过对比两种不同的遮罩层实现代码，分析了可能的原因。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目中遇到很奇怪的一个现象，不知道各位以前有没遇到过，就是在一个新打开的子窗口上使用了一个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竟然都是一样的！如下图: