在IE6,IE7 中 window.onresize 被多次执行

Posted on 2010-05-20 13:04  pumeifen  阅读(1844)  评论(0编辑  收藏  举报

页面上给window对象定义其onresize事件,

在拉伸缩小窗口时,其onresize方法将被执行多次,并且其具体执行的次数在不同的电脑有不同的值,

相当诡异,IE8 等其他浏览器则无此现象,故可认定此为IE6,IE7浏览器的bug。看看代码

 

 

代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<script type="text/javascript">
window.onresize
= function() {
alert(
" i am resizing");
}
</script>

</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<asp:TextBox ID="TextBox1" runat="server" Width="150px"></asp:TextBox>
</div>
<div style="margin-left: -10px">
<asp:Button ID="Button1" runat="server" on OnClick="aaa" Text=">" />
</div>
</div>
</form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
protected
void Page_Load(object sender, EventArgs e)
{

}
protected
void aaa(object sender, EventArgs e)
{
this.TextBox1.Width = new Unit(1000);
this.TextBox1.Text = "aaaaaaaaaaaaaaaaaaaaaaaa";
}
}

当我最大,最小化的时候 alert会走数遍。当我在onresize 里做业务逻辑。或者说显示隐藏控件的时候会失效。

 

然后我的解决方法是 :

我根据页面上一某个DIV ,判断该div是否真的改变位置来确定它是否执行onresizing 事情.  以下是一个大概的思路

 

 

 

代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<script type="text/javascript">
window.onresize
= function() {
var divContent = document.getElementById("<% =divContent.ClientID %>");
var HiddenField1 = document.getElementById("<% =HiddenField1.ClientID %>");
var lt = getELXY(divContent)['x'];
var rt = getELXY(divContent)['x'] + getELWH(divContent)['w'];
var topY = getELXY(divContent)['y'];
var bottomY = getELXY(divContent)['y'] + getELWH(divContent)['h'];
var obj = HiddenField1.value;
if (lt.toString() == obj.split(";", 0) && rt.toString() == obj.split(";", 1) && topY.toString() == obj.split(";", 2) && lt.toString() == obj.split(";", 3)) {
HiddenField1.value
= lt + ";" + rt + ";" + topY + ";" + bottomY;
// hidewindow();
}
}
function pageload() {
var divContent = document.getElementById("<% =divContent.ClientID %>");
var HiddenField1 = document.getElementById("<% =HiddenField1.ClientID %>");
var lt = getELXY(divContent)['x'];
var rt = getELXY(divContent)['x'] + getELWH(divContent)['w'];
var topY = getELXY(divContent)['y'];
var bottomY = getELXY(divContent)['y'] + getELWH(divContent)['h'];
HiddenField1.value
= lt + ";" + rt + ";" + topY + ";" + bottomY;
// showwindow();
}

function getELXY(e) {
return { x: e.offsetLeft, y: e.offsetTop };
}
function getELWH(e) {
return { w: e.offsetWidth, h: e.offsetHeight };
}
function getClientXY(e) {
e
= e || event;
return { cx: e.clientX, cy: e.clientY };
}
</script>

</head>
<body>
<form id="form1" runat="server">
<div id ="divContent" runat ="server" >
<div>
<asp:TextBox ID="TextBox1" runat="server" Width="150px"></asp:TextBox>
</div>
<div style="margin-left: -10px">
<asp:Button ID="Button1" runat="server" OnClick="aaa" Text=">" />
</div>
<asp:HiddenField ID="HiddenField1" runat="server" />
</div>
</form>
</body>
</html>