IE下window.onresize被多次执行的解决

最新推荐文章于 2016-05-10 11:52:42 发布

转载最新推荐文章于 2016-05-10 11:52:42 发布 · 228 阅读

文章标签：

本文探讨了IE浏览器中onresize事件触发次数不稳定的问题，通过对比不同浏览器的行为，确认该现象为IE特有的bug。提供了两种修改方案来规避这一问题，并确保在窗口调整大小时仅触发一次事件处理。

页面上给window对象定义其onresize事件，在拉伸缩小窗口时，其onresize方法将被执行多次，并且其具体执行的次数在不同的电脑有不同的值，相当诡异，Firefox等其他浏览器则无此现象，故可认定此为IE浏览器的bug。看看代码：

<html>
<head>
<script type="text/javascript">
      function resizeFunc(){
         alert(Math.random());
      }
   </script>
</head>
<body>
    <div>Text...</div>
    <script type="text/javascript">
        window.attachEvent("onresize",resizeFunc); //方法一
        //window.onresize = resizeFunc;     //方法二，支持ff
    </script>
</body>
</html>

当拉伸或缩小窗口时，可以看到 alert 被执行了数次。

这个bug其实在几个月前就发现了，当时进度逼得紧，没有时间做详细研究，况且此bug比较隐蔽，几乎不会带来任何异常，无非是多运行了几遍函数，浪费点客户的资源又不被觉察......

ok，来看看我暂时想到的解决方案：

<html>
<head>
<script type="text/javascript">
      function resizeFunc(){
         alert(Math.random());
      }
   </script>
</head>
<body>
<div id="box" style="width:100%">
    <div>Text...</div>
</div>
    <script type="text/javascript">
         var Container = document.getElementById("box");
        Container.attachEvent("onresize",resizeFunc); //方法一
        //Container.onresize = resizeFunc;     //方法二，支持ff
    </script>
</body>
</html>