跨瀏覽器窗口調整大小事件 - JavaScript / jQuery

Question

在Firefox， WebKit和Internet Explorer中使用的窗口調整大小事件的正確（現代）方法是什么？

你可以打開/關閉兩個滾動條嗎？

Answer 1

jQuery有一個內置的方法 ：

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

對於用戶界面的響應起見，你可以考慮使用的setTimeout只有經過數毫秒打電話給你的代碼，如下面的例子，啟發這樣 ：

function doSomething() {
    alert("I'm done resizing for the moment");
};

var resizeTimer;
$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(doSomething, 100);
});

Answer 2

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

    alert('resize');

});

Answer 3

這是非jQuery方式進入resize事件：

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

它適用於所有現代瀏覽器。 它不油門你什么。 以下是它的實例 。

Answer 4

很抱歉打開一個舊線程，但如果有人不想使用jQuery，你可以使用：

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

Answer 5

由於你對jQuery開放， 這個插件似乎可以解決問題。

Answer 6

使用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的評論中所指出和解釋的那樣。

Answer 7

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> 

Answer 8

我認為jQuery插件“jQuery resize event”是最好的解決方案，因為它負責限制事件，以便它在所有瀏覽器中都能正常工作。 它類似於安德魯斯的答案，但更好，因為你可以將resize事件掛鈎到特定的元素/選擇器以及整個窗口。 它為編寫干凈的代碼開辟了新的可能性。

這個插件可以在這里找到

如果你添加了很多聽眾，就會出現性能問題，但對於大多數用例來說，它是完美的。

Answer 9

我認為你應該對此進一步加以控制：

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

Answer 10

希望它能幫助jQuery

首先定義一個函數，如果有現有函數則跳到下一步。

 function someFun() {
 //use your code
 }

瀏覽器調整大小使用這些。

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

Answer 11

除了提到的窗口大小調整功能之外，重要的是要理解調整大小事件如果在沒有使事件消失的情況下使用則會激活很多。

保羅愛爾蘭有一個很好的功能，可以大肆調整大小調整。 非常推薦使用。 跨瀏覽器工作。 前幾天在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...
});