Javascript 当页面是框架集的一部分并垂直调整大小时，IE7中不会触发Body onresize事件
我有一个简单的框架集，垂直方向有两个框架，即两行： 第一行包含一个固定的标题 第二行在顶部包含一个固定工具栏，在底部包含一个可调整大小的工具栏 由于浏览器之间的渲染差异，我不能只为“内容”框架启用滚动，因为这意味着整个框架（包括工具栏）将在某些浏览器中滚动，而在其他浏览器中，只有底部可调整大小的部分将获得滚动条（这是我想要的）。下面的示例中缺少用于控制容器和toolbarContainer元素的css，但这与当前的情况无关 问题是：给定下面的示例代码，如果在使用IE7时垂直调整浏览器窗口的大小，我不会得到body元素的onresize事件（IE7兼容模式下的IE8，但纯IE7也存在同样的问题）。在我尝试过的所有其他浏览器中，我都会得到onresize事件，如果我水平调整浏览器窗口的大小，我也会在IE7中得到该事件 在这种情况下，IE7和onresize事件是否存在已知问题？ 注1：我知道我应该完全摆脱框架集，但现在这不是一个选项 注2：我已经搜索了关于这个主题的信息，但由于这个问题似乎只出现在IE7&frame上下文中，所以现在不太可能影响太多的开发人员 index.htm：Javascript 当页面是框架集的一部分并垂直调整大小时，IE7中不会触发Body onresize事件,javascript,html,internet-explorer-7,frameset,Javascript,Html,Internet Explorer 7,Frameset,我有一个简单的框架集，垂直方向有两个框架，即两行： 第一行包含一个固定的标题 第二行在顶部包含一个固定工具栏，在底部包含一个可调整大小的工具栏 由于浏览器之间的渲染差异，我不能只为“内容”框架启用滚动，因为这意味着整个框架（包括工具栏）将在某些浏览器中滚动，而在其他浏览器中，只有底部可调整大小的部分将获得滚动条（这是我想要的）。下面的示例中缺少用于控制容器和toolbarContainer元素的css，但这与当前的情况无关 问题是：给定下面的示例代码，如果在使用IE7时垂直调整浏览器窗口的大小，
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Resize Test</title>
</head>
<frameset rows="104,*" framespacing="0" frameborder="no">
<frame src="header.htm" name="header" frameborder="0" noresize="noresize" scrolling="no" marginheight="0" marginwidth="0" />
<frame src="content.htm" name="content" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" />
</frameset>
</html>
调整大小测试
<!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>
<title>Header</title>
<style type="text/css" media="all">
body { margin: 0px;
padding: 0px;
width: 100%;
height: 104px;
}
</style>
</head>
<body>
<img alt="" width="699" height="104" border="0" src="header.png" />
</body>
</html>
标题
正文{页边距：0px；
填充：0px；
宽度：100%；
高度：104px；
}
<!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>
<title>Content</title>
<script type="text/javascript">
function repositionContainers() {
//document.write('resize');
var divWrapper = document.getElementById('wrapper');
var divContainer = document.getElementById('container');
var wrapWidth = divWrapper.clientWidth;
var wrapHeight = divWrapper.clientHeight - 27;
// (resizing code follows here ...)
}
</script>
<style type="text/css" media="all">
body { background: #ffa;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
</style>
</head>
<body onload = "repositionContainers();" onresize="repositionContainers();">
<div id="wrapper">
<div id="toolbarContainer">
<img alt="" width="212" height="27" border="0" src="toolbar.png" />
</div>
<div id="container">
<h1>Contents goes here ...</h1>
</div>
</div>
</body>
</html>
内容
函数（）{
//document.write（'resize'）；
var divWrapper=document.getElementById（'wrapper'）；
var divContainer=document.getElementById（'container'）；
var wrapWidth=divWrapper.clientWidth；
var wrapHeight=divWrapper.clientHeight-27；
//（调整代码如下所示…）
}
正文{背景：#ffa；
边际：0px；
填充：0px；
宽度：100%；
身高：100%；
}
内容放在这里。。。
<style>
html, body {
height: 100%;
}
</style>
html，正文{
身高：100%；
}