解決在IE瀏覽器中resize事件執行多次
阿新 • • 發佈：2019-02-10
resize事件是在視窗或框架的大小被調整時發生，包括最小化、最大化。在IE和Opera瀏覽器中，只要視窗邊框被拖動，就觸發該事件，在Mozilla瀏覽器中，resize 事件只是在停止改變視窗大小時才會觸發。
這是個讓人每次改變頁面視窗的大小時很鬱悶的方法，尤其在IE瀏覽器中，稍微動下視窗邊框，就會觸發很多次事件。更讓人蛋疼的是在resize事件中包含某些頁面內容處理或計算導致resize事件再次被觸發的時候，IE會隨機陷入假死狀態。
網上找了好久，都是千律一篇的，到處都是轉載的一個方法；以下是網上找到的一個解決方法：
這個方法雖然可以解決多次執行事件問題，但是不完美，最後我找到了一個jquery外掛形式的解決方案；var resizeTimer = null; $(window).resize(function() { if (resizeTimer) clearTimeout(resizeTimer); resizeTimer = setTimeout("changeHeight()", 500); });//resize事件延遲500毫秒執行
你可以把上面的程式碼另存為jquery.wresize.js匯入網頁,把以下程式碼拷貝到記事本中，另存為網頁，然後測試一下。示例：/* =============================================================================== WResize is the jQuery plugin for fixing the IE window resize bug ............................................................................... Copyright 2007 / Andrea Ercolino ------------------------------------------------------------------------------- LICENSE: http://www.opensource.org/licenses/mit-license.php WEBSITE: http://noteslog.com/ =============================================================================== */ (function($) { $.fn.wresize = function(f) { version = '1.1'; wresize = { fired : false, width : 0 }; function resizeOnce() { if ($.browser.msie) { if (!wresize.fired) { wresize.fired = true; } else { var version = parseInt($.browser.version, 10); wresize.fired = false; if (version < 7) { return false; } else if (version == 7) { // a vertical resize is fired once, an horizontal resize // twice var width = $(window).width(); if (width != wresize.width) { wresize.width = width; return false; } } } } return true; } function handleWResize(e) { if (resizeOnce()) { return f.apply(this, [ e ]); } } this.each(function() { if (this == window) { $(this).resize(handleWResize); } else { $(this).resize(f); } }); return this; }; })(jQuery);
<!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" style="overflow:hidden;"> <head> <title>test window resize</title> <script type="text/javascript" src="http://jquery.com/src/jquery-latest.pack.js"></script> <script type="text/javascript" src="jquery.wresize.js"></script> <script type="text/javascript"> jQuery(function($) { function content_resize() { var w = $(window); var H = w.height(); var W = w.width(); $('#content').css({ width : W - 20, height : H - 20 }); } $(window).wresize(content_resize); content_resize(); }); </script> </head> <body> <div id="content" style="border: 1px dashed silver; position: absolute; overflow: auto;"> test test testtest test test test test test test test t est test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </div> </body> </html>