240

在 Firefox、 WebKit和 Internet Explorer中点击窗口调整大小事件的正确（现代）方法是什么？

你能打开/关闭两个滚动条吗？

4

11 回答 11

369

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);
});
于 2010-06-03T19:24:22.483 回答
48 
$(window).bind('resize', function () { 

    alert('resize');

});
于 2009-07-28T14:34:11.420 回答
44

这是利用 resize 事件的非 jQuery 方式：

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

它适用于所有现代浏览器。它不会为您节流任何东西。这是它的一个例子。

于 2013-09-11T15:27:51.333 回答
17

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

function foo(){....};
window.onresize=foo;
于 2012-06-17T15:07:35.080 回答
8

由于您对 jQuery 持开放态度，因此这个插件似乎可以解决问题。

于 2009-03-01T05:15:01.753 回答
5

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

编辑：
)* 实际上在技术上并不相同，正如WraithKenny和Henry Blyth的评论中所指出和解释的那样。

于 2013-06-25T11:44:15.757 回答
4

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>
于 2013-09-02T08:22:40.910 回答
3

我认为 jQuery 插件“jQuery resize event”是最好的解决方案，因为它负责限制事件，使其在所有浏览器中都能正常工作。它类似于 Andrews 的回答，但更好，因为您可以将调整大小事件挂钩到特定元素/选择器以及整个窗口。它为编写干净的代码开辟了新的可能性。

该插件可在此处获得

如果添加大量侦听器会出现性能问题，但对于大多数用例来说它是完美的。

于 2011-03-07T16:00:30.367 回答
0

我认为您应该对此添加进一步的控制：

    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);
        });
    }
于 2013-03-29T19:19:45.297 回答
0

希望它对 jQuery 有帮助

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

 function someFun() {
 //use your code
 }

浏览器调整大小使用这些。

 $(window).on('resize', function () {
    someFun();  //call your function.
 });
于 2013-11-13T09:41:54.157 回答
0

除了提到的窗口调整大小功能之外，重要的是要了解调整大小事件如果在没有消除事件的情况下使用会触发很多。

Paul Irish 有一个出色的功能，可以很好地消除 resize 调用。非常推荐使用。跨浏览器工作。前几天在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...
});
于 2016-04-18T13:15:00.583 回答