跨浏览器窗口调整事件 – JavaScript / jQuery

攻击 Firefox, WebKit和Internet Explorer中的window resize事件的正确(现代)方法是什么?

你可以打开/closures两个滚动条?

jQuery有一个内置的方法 :

 $(window).resize(function () { /* do something */ }); 

出于UI响应的考虑,您可能会考虑使用setTimeout仅在几毫秒之后调用您的代码,如以下示例所示,受此启发:

 function doSomething() { alert("I'm done resizing for the moment"); }; var resizeTimer; $(window).resize(function() { clearTimeout(resizeTimer); resizeTimer = setTimeout(doSomething, 100); }); 
 $(window).bind('resize', function () { alert('resize'); }); 

下面是调入resize事件的非jQuery方法:

 window.addEventListener('resize', function(event){ // do stuff here }); 

它适用于所有现代浏览器。 它不会为你节stream任何东西。 这是一个在行动中的例子 。

对不起,提出一个旧的线程,但如果有人不想使用jQuery,你可以使用这个:

 function foo(){....}; window.onresize=foo; 

既然你是开放的jQuery, 这个插件似乎是伎俩。

使用jQuery 1.9.1我刚刚发现,尽pipe在技术上相同)*,但这在IE10(但在Firefox中)中不起作用:

 // did not work in IE10 $(function() { $(window).resize(CmsContent.adjustSize); }); 

而这在两个浏览器中工作:

 // did work in IE10 $(function() { $(window).bind('resize', function() { CmsContent.adjustSize(); }; }); 

编辑:
)*正如Wraith Kenny和Henry Blyth的评论中所指出和解释的那样,其实技术上并不相同。

jQuery默认提供$(window).resize()函数:

 <script type="text/javascript"> // function for resize of div/span elements var $window = $( window ), $rightPanelData = $( '.rightPanelData' ) $leftPanelData = $( '.leftPanelData' ); //jQuery window resize call/event $window.resize(function resizeScreen() { // console.log('window is resizing'); // here I am resizing my div class height $rightPanelData.css( 'height', $window.height() - 166 ); $leftPanelData.css ( 'height', $window.height() - 236 ); }); </script> 

我认为jQuery插件“jQueryresize事件”是最好的解决scheme,因为它负责限制事件,使其在所有浏览器中都一样。 它类似于安德鲁斯的回答,但更好,因为你可以钩住resize事件到特定的元素/select器以及整个窗口。 它为编写干净的代码开辟了新的可能性。

这个插件可以在这里find

如果您添加了很多侦听器,则会出现性能问题,但对于大多数使用情况而言,这是完美的。

我想你应该进一步控制这个:

  var disableRes = false; var refreshWindow = function() { disableRes = false; location.reload(); } var resizeTimer; if (disableRes == false) { jQuery(window).resize(function() { disableRes = true; clearTimeout(resizeTimer); resizeTimer = setTimeout(refreshWindow, 1000); }); } 

希望它能帮助jQuery

先定义一个函数,如果有一个现有函数跳到下一步。

  function someFun() { //use your code } 

浏览器resize使用像这样。

  $(window).on('resize', function () { someFun(); //call your function. }); 

除了提到的窗口大小调整function之外,重要的是要明白,resize的事件如果不经过事件就会被触发。

保罗·爱尔兰人有一个很好的function,可以大大减轻重新调整的大小。 非常推荐使用。 作品跨浏览器。 在IE8testing它在前一天,一切都很好。

http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

一定要看看演示看看不同之处。

这是完整性的function。

 (function($,sr){ // debouncing function from John Hann // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/ var debounce = function (func, threshold, execAsap) { var timeout; return function debounced () { var obj = this, args = arguments; function delayed () { if (!execAsap) func.apply(obj, args); timeout = null; }; if (timeout) clearTimeout(timeout); else if (execAsap) func.apply(obj, args); timeout = setTimeout(delayed, threshold || 100); }; } // smartresize jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); }; })(jQuery,'smartresize'); // usage: $(window).smartresize(function(){ // code that takes it easy... });