调整窗口大小时调用函数

时间:2013-03-04 15:57:15

标签: javascript jquery window-resize

每当调整浏览器窗口大小时,如何调用此(或任何)JS函数?

<script type="text/javascript">
 function setEqualHeight(e) {
     var t = 0;
     e.each(function () {
         currentHeight = $(this).height();
         if (currentHeight > t) {
             t = currentHeight
         }
     });
     e.height(t)
 }
 $(document).ready(function () {
     setEqualHeight($(".border"))
 })
</script>

4 个答案:

答案 0 :(得分:27)

您可以使用onresize事件窗口:

window.onresize = setEqualHeight;

答案 1 :(得分:16)

您可以订阅window.onresize事件(See here

window.onresize = setEqualHeight;

window.addEventListener('resize', setEqualHeight);

答案 2 :(得分:11)

您使用jquery,因此使用.resize()方法绑定它。

$(window).resize(function () {
    setEqualHeight( $('#border') );
});

答案 3 :(得分:10)

这段代码将添加一个定时器,在调整窗口大小200毫秒后调用resize函数。这将减少方法的调用。

var globalResizeTimer = null;

$(window).resize(function() {
    if(globalResizeTimer != null) window.clearTimeout(globalResizeTimer);
    globalResizeTimer = window.setTimeout(function() {
        setEqualHeight();
    }, 200);
});