admin管理员组文章数量:1391947
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 patibility 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" ".dtd">
<html xmlns="">
<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" ".dtd">
<html xmlns="">
<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" ".dtd">
<html xmlns="">
<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 patibility 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/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3/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/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/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/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/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>
1 Answer
Reset to default 7IE7 with a DTD needs:
<style>
html, body {
height: 100%;
}
</style>
本文标签：
版权声明：本文标题：javascript - Body onresize event does not fire in IE7 when page is part of a frameset and resized vertically - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744709284a2621028.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论