`
传说の黄花菜
  • 浏览: 202173 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

IE6.0中window.open之怪现象

阅读更多

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



 
 

希望哪位高手看到了不吝赐教,解除我的困惑。。  我并没觉得mask.js中的修改的代码哪里有问题。。只是一个是循环赋值,一个直接赋值罢了。。。真是百思不得其解。。

  • 大小: 63.9 KB
  • 大小: 36.6 KB
  • 大小: 67.5 KB
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics