Browserübergreifendes Fenster Größenänderungsereignis - JavaScript / jQuery

Was ist die richtige (moderne) Methode zum Tippen auf das Fenstergrößenänderungsereignis, das in Firefox, WebKit und Internet Explorer funktioniert ?

Und können Sie beide Bildlaufleisten ein- und ausschalten?

jQuery verfügt über eine integrierte Methode :

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

Aus Gründen der UI Ansprechbarkeit, könnte man erwägen , einen SetTimeout mit Ihrem Code aufrufen erst nach einer bestimmten Anzahl von Millisekunden, wie im folgenden Beispiel gezeigt, inspiriert durch diese :

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

});

Hier ist die Nicht-jQuery-Methode zum Abrufen des Größenänderungsereignisses:

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

Es funktioniert auf allen modernen Browsern. Es tut nicht Drossel etwas für Sie. Hier ist ein Beispiel dafür in Aktion.

Es tut mir leid, einen alten Thread aufzurufen, aber wenn jemand jQuery nicht verwenden möchte, können Sie Folgendes verwenden:

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

Da Sie für jQuery offen sind, scheint dieses Plugin den Trick zu tun.

Mit jQuery 1.9.1 habe ich gerade herausgefunden, dass dies, obwohl technisch identisch) *, in IE10 (aber in Firefox) nicht funktioniert hat:

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

während dies in beiden Browsern funktionierte:

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

Edit :)
* Eigentlich technisch nicht identisch, wie in den Kommentaren von WraithKenny und Henry Blyth vermerkt und erklärt .

jQuerybietet $(window).resize()standardmäßig folgende Funktionen:

<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> 

Ich halte das jQuery-Plugin "jQuery resize event" für die beste Lösung, da es dafür sorgt, dass das Ereignis so gedrosselt wird, dass es in allen Browsern gleich funktioniert. Es ähnelt der Antwort von Andrews, ist jedoch besser, da Sie das Größenänderungsereignis an bestimmte Elemente / Selektoren sowie an das gesamte Fenster binden können. Es eröffnet neue Möglichkeiten, sauberen Code zu schreiben.

Das Plugin finden Sie hier

Es gibt Leistungsprobleme, wenn Sie viele Listener hinzufügen, aber für die meisten Anwendungsfälle ist es perfekt.

Ich denke, Sie sollten dies weiter kontrollieren:

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

hoffe, es wird in jQuery helfen

Definieren Sie zuerst eine Funktion. Wenn eine Funktion vorhanden ist, fahren Sie mit dem nächsten Schritt fort.

 function someFun() {
 //use your code
 }

Browser Größe ändern Verwendung wie diese.

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

Neben den erwähnten Fenstergrößenänderungsfunktionen ist es wichtig zu verstehen, dass die Größenänderungsereignisse häufig ausgelöst werden, wenn sie verwendet werden, ohne dass die Ereignisse entkoppelt werden.

Paul Irish hat eine hervorragende Funktion, die die Größenänderung stark beeinträchtigt. Sehr zu empfehlen. Funktioniert browserübergreifend. Habe es neulich in IE8 getestet und alles war in Ordnung.

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

Schauen Sie sich unbedingt die Demo an an, um den Unterschied zu sehen.

Hier ist die Funktion der Vollständigkeit halber.

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