首页 > 编程语言> > javascript – 当页面是框架集的一部分并垂直调整大小时,在IE7中不会触发正文onresize事件

javascript – 当页面是框架集的一部分并垂直调整大小时,在IE7中不会触发正文onresize事件

2019-07-30 17:34:43 作者：互联网

我有一个简单的框架集,垂直有两个框架,即两行：

第一行包含固定标头.

第二行包含顶部的固定工具栏,底部包含可调整大小的工具栏.

由于浏览器之间的渲染差异,我不能只为“内容”框架启用滚动,因为这意味着整个框架(包括工具栏)将在某些浏览器中滚动,而只有底部的可调整大小部分才能获得滚动条在其他浏览器中(这是我想要的).下面的示例中缺少用于控制容器和toolbarContainer元素的css,但现在这不相关.

问题是：给定下面的示例代码,如果我在使用IE7(在IE7兼容模式下的IE8,但纯IE7表现出同样的问题时)垂直调整浏览器窗口时,我没有得到body元素的onresize事件.在我尝试过的所有其他浏览器中,我确实得到了onresize事件,如果我横向调整浏览器窗口大小,我也会在IE7中获得该事件.

在这种情况下,IE7和onresize事件是否存在已知问题？

注1：我知道我应该完全摆脱框架集,但现在这不是一个选择.

注2：我搜索了有关此主题的信息,但由于问题似乎只出现在IE7和框架上下文中,因此现在不太可能影响太多的开发人员.

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 onl oad = "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>

解决方法:

带有DTD的IE7需要：

<style>
html, body {
    height: 100%;
}
</style>

标签：html,javascript,internet-explorer-7,frameset
来源： https://codeday.me/bug/20190730/1584179.html