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

2019-07-30 17:34:43 阅读：212 来源： 互联网

标签：html javascript internet-explorer-7 frameset

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

第一行包含固定标头.

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

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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