跨浏览器窗口大小调整事件- JavaScript / jQuery

既然你是开放的jQuery， 这个插件似乎做的把戏。

$(window).bind('resize', function () {


alert('resize');


});

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);
});

我认为jQuery插件“jQuery resize event”是最好的解决方案，因为它负责调节事件，使它在所有浏览器上都能正常工作。这与Andrews的答案相似，但更好，因为你可以将resize事件与特定的元素/选择器以及整个窗口挂钩。它为编写干净的代码提供了新的可能性。

插件在这里可用

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

很抱歉提出了一个旧线程，但如果有人不想使用jQuery，你可以使用这个:

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

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

    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 1.9.1我刚刚发现，虽然技术上相同)*，这在IE10中不工作(但在Firefox中):

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

虽然这在两种浏览器中都有效:

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

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>

下面是使用resize事件的非jquery方法:

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

它适用于所有现代浏览器。它为你做不节流任何事情。这里有一个例子的它在行动。

希望对jQuery有帮助

首先定义一个函数，如果已有函数，则跳到下一步。

 function someFun() {
//use your code
}

浏览器调整大小的方法如下。

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

除了上面提到的窗口调整大小函数之外，还有一点很重要，那就是如果没有对事件进行解压缩，那么调整大小事件就会触发很多次。

Paul Irish有一个很好的函数，它可以大量地撤销调整大小的调用。非常推荐使用。跨浏览器的工作。前几天在IE8中进行了测试，一切正常。

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

确保查看演示来查看区别。

这里是完整的函数。

(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...
});