当页面是框架集的一部分并垂直调整大小时，主体 onresize 事件不会在 IE7 中触发
我有一个简单的框架集，有两个垂直框架，即两行：
第一行包含一个固定标题。
第二行包含顶部的固定工具栏和底部的可调整大小的工具栏。
由于浏览器之间的渲染差异，我不能只启用“内容”框架的滚动，因为这意味着整个框架（包括工具栏）将在某些浏览器中滚动，而只有底部可调整大小的部分才会出现滚动条在其他浏览器中（这就是我想要的）。下面的示例中缺少用于控制容器和工具栏容器元素的 css，但这现在不相关。
问题是：给定下面的示例代码，如果我在使用 IE7 时垂直调整浏览器窗口大小（IE8 处于 IE7 兼容模式，但纯 IE7 也会出现相同的问题），则不会收到 body 元素的 onresize 事件。在我尝试过的所有其他浏览器中，我确实收到了 onresize 事件，如果我水平调整浏览器窗口的大小，我也会在 IE7 中收到该事件。
在这种情况下，IE7 和 onresize 事件是否存在已知问题？
注 1：我知道我应该完全删除框架集，但目前还不能选择。
注2：我已经搜索过有关此主题的信息，但由于该问题似乎只出现在IE7&frame上下文中，因此目前不太可能影响太多开发人员。
索引.htm：
<!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>
标题.htm：
<!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>
内容.htm：
<!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>
I have a simple frameset with two frames vertically, i.e. two rows:
First row contains a fixed header.
Second row contains a fixed toolbar at the top and a resizable are at the bottom.
Due to rendering differences between browsers, I cannot just enable scrolling for the "content" frame, as this would mean that the entire frame, including the toolbar, would scroll in some browsers, whereas only the resizable portion at the bottom would get a scrollbar in other browsers (which is what I want). The css for controlling the container and toolbarContainer elements is missing from the example below, but this is not relevant right now.
The problem is: Given the sample code below, I do not get an onresize event for the body element if I resize the browser window vertically when using IE7 (IE8 in IE7 compatibility mode, but pure IE7 exhibits the same problem). In all other browsers I have tried, I do get the onresize event and if I resize the browser window horizontally, I also get the event in IE7.
Is there a known problem with IE7 and the onresize event in this context?
Note 1: I am aware that I ought to get rid of the frameset altogether, but this is not an option right now.
Note 2: I have searched for information on this topic, but as the problem only seems to appear in the IE7&frame context, it is unlikely to affect too many developers nowadays.
index.htm:
<!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>
header.htm:
<!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>
content.htm:
<!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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
具有 DTD 的 IE7 需要：
IE7 with a DTD needs: