IE6中window.onresize事件的处理

最新推荐文章于 2025-12-01 23:45:00 发布

原创最新推荐文章于 2025-12-01 23:45:00 发布 · 3.8k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#ie #wrapper #safari #浏览器 #chrome

Javascript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个浏览器窗口大小调整功能在IE6中遇到的问题及解决方案。作者最初尝试使用简单的onresize事件监听器来调整指定层的尺寸，但在IE6中该事件被无限触发。通过修改代码逻辑，在调整尺寸后解除事件监听并利用setTimeout重新注册监听器的方法成功解决了此问题。

不可否认，IE6是目前最SB的一款浏览器。

前段时间做一个功能：某个层的大小要随着浏览器窗口的变化而变化。代码很简单，很快写完了，如下所示

<script type="text/javascript">
    function g_rsm(){
        var hs = YAHOO.util.Dom.getViewportHeight();
        var ws = YAHOO.util.Dom.getViewportWidth();
        YAHOO.util.Dom.setStyle("main_wrapper","width",(ws-112)+"px");
        YAHOO.util.Dom.setStyle("main_wrapper","height",(hs-82)+"px");
    }
    window.onresize = g_rsm;
</script>
</head>
<body onload="g_rsm()">

然后，Chrome、FF2-3、Safari都没有问题，但是在IE下，onresize事件会被无限次执行，直到死掉，够傻帽。

于是，只好换一种写法

<script type="text/javascript">
    function g_rsm(){
        window.onresize = null;
        var hs = YAHOO.util.Dom.getViewportHeight();
        var ws = YAHOO.util.Dom.getViewportWidth();
        YAHOO.util.Dom.setStyle("main_wrapper","width",(ws-112)+"px");
        YAHOO.util.Dom.setStyle("main_wrapper","height",(hs-82)+"px");
        setTimeout(g_sss,500);
    }
    function g_sss()
    {
        window.onresize = g_rsm;
    }
</script>
</head>
<body onload="g_rsm()">