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

240

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?

BuddyJoe
quelle
Ich untersuche das auch. Ich würde gerne versuchen, die hier angebotenen Lösungen anzuwenden, aber ich fürchte, ich verstehe die Syntax nicht: $ (Fenster). Ist das etwas spezielles für jquery?
Byff
1
Byff, ja, $ (Fenster) ist ein jQuery-Konstrukt. window.onresize ist das Äquivalent in rohem JavaScript.
Andrew Hedges
Diese Demo kann jedem helfen, auf allen Browsern jsfiddle.net/subodhghulaxe/bHQV5/2
Subodh Ghulaxe
window.dispatchEvent(new Event('resize')); stackoverflow.com/questions/1818474/…
Dylan Valade
Unter Opera auf Mobilgeräten wird es jedes Mal ausgelöst, wenn die obere Leiste (Browser-Benutzeroberfläche) ein- / ausgeblendet wird.
Psur

Antworten:

367

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);
});
Andrew Hedges
quelle
34
Warum wird dieses Ereignis nicht ausgelöst, wenn das Fenster mit der Schaltfläche auf Vollbild erweitert wird?
Sly
2
@Sly Für mich funktioniert es in Safari, Chrome und Mozilla auf Mac. Welchen Browser benutzt du?
Mark Vital
2
@Sly:$('.button').on({ click: function(){ /* your code */ $(window).trigger('resize') })
Zack Zatkin-Gold
6
Elijah, das ist JavaScript. Was Sie geschrieben haben, ist nicht korrekt (außer in einem bestimmten Fall, wenn Sie mit neu konstruieren).
Yoh Suzuki
3
Es ist erwähnenswert, dass diese jQuery-Funktion der aktuellen Liste der Funktionen, die bei einer Fenstergrößenänderung aufgerufen werden sollen, einen Funktionsaufruf "hinzufügt". Vorhandene Ereignisse, die derzeit in einer Fenstergröße geplant sind, werden nicht überschrieben.
RTF
48
$(window).bind('resize', function () { 

    alert('resize');

});
fts
quelle
4
Ich bevorzuge den Bind-Ansatz, da die resize () -Methode eigentlich eine Verknüpfung für den Full-Bind-Ansatz ist und ich häufig feststelle, dass es normalerweise mehr als einen Ereignishandler gibt, den ich auf ein Element anwenden sollte .
Mike Kormendy
@Mike - Nicht nur das, aber ich vermute, dass die Resize-Methode keine "Unbind" -Methode hat, falls Sie den Listener entfernen möchten. "binden" ist definitiv der richtige Weg!
Shane
43

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.

Jondlm
quelle
Diese Lösung würde im IE nicht funktionieren. Feste Version mit Unterstützung von IE dom: stackoverflow.com/questions/6927637/…
Sergey
1
> Es drosselt nichts für Sie. Könnten Sie bitte näher darauf eingehen? Was sollte / würde es drosseln? Bezieht es sich auf das Ereignis, das viele Male hintereinander ausgelöst wird?
Josinalvo
@josinalvo Im Allgemeinen, wenn Sie ein Ereignis hören, das viel auslöst, möchten Sie es entprellen (z. B. lodash) , damit Sie keinen Engpass in Ihrem Programm verursachen.
Jondlm
17

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;
Javascript ist Zukunft
quelle
8
Beachten Sie jedoch, dass dadurch alle vorhandenen Handler überlastet werden, die möglicherweise an window.onresize gebunden sind. Wenn Ihr Skript in einem Ökosystem mit anderen Skripten leben muss, sollten Sie nicht davon ausgehen, dass Ihr Skript das einzige ist, das etwas an der Fenstergröße ändern möchte. Wenn Sie ein Framework wie jQuery nicht verwenden können, sollten Sie zumindest in Betracht ziehen, das vorhandene window.onresize zu greifen und Ihren Handler am Ende hinzuzufügen, anstatt es vollständig zu überfrachten.
Tom Auger
2
@TomAuger "Sie sollten zumindest in Betracht ziehen, das vorhandene window.onresize zu greifen und Ihren Handler am Ende hinzuzufügen" - Sie meinten wahrscheinlich das Gegenteil, dh "vorhandenen Handler am Ende Ihres Handlers aufrufen"? Ich würde wirklich gerne einen Javascript-Code sehen, der etwas zum Ende der bereits vorhandenen Funktion hinzufügt :-)
TMS
Ich verstehe Ihren Standpunkt in gewissem Sinne - Ihr neuer onResize-Handler muss den vorhandenen onResize umschließen. Die Funktion, die Sie zu onResize hinzufügen möchten, muss jedoch erst aufgerufen werden, nachdem der ursprüngliche onResize-Handler aufgerufen wurde. So können Sie weiterhin sicherstellen, dass Ihre neue onResize-Funktion nach der ursprünglichen onResize-Funktion ausgeführt wird, was wahrscheinlich besser ist als die umgekehrte.
Tom Auger
8

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

Paolo Bergantino
quelle
5

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 .

Bassim
quelle
1
Es gibt zwei Änderungen. Welches hatte die Wirkung? ( .resize()zu .bind('resize')oder Hinzufügen der anonymen Funktion? Ich denke, es ist die zweite.)
WraithKenny
@WraithKenny Guter Punkt. Es kann sehr gut sein, dass das Hinzufügen der anonymen Funktion dafür gesorgt hat, dass es funktioniert. Ich erinnere mich nicht, ob ich es versucht habe.
Bassim
1
Im ersten Fall wird der adjustSizeverliert seine Methode Rahmen this, während der zweite Anruf CmsContent.adjustSize()Konfitüren this, dh this === CmsContent. Wenn die CmsContentInstanz in der adjustSizeMethode erforderlich ist , schlägt der erste Fall fehl. Der zweite Fall funktioniert für jede Art von Funktionsaufruf. Es wird daher empfohlen, immer eine anonyme Funktion zu übergeben.
Henry Blyth
1
@ HenryBlyth Danke! +1
Bassim
4

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> 
Aditya P Bhatt
quelle
3

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.

alter Zauberer
quelle
0

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);
        });
    }
Francesco Frapporti
quelle
0

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.
 });
Venu immadi
quelle
0

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