Evénement de redimensionnement de la fenêtre JavaScript

Question

Comment puis-je m'accrocher à un événement de redimensionnement de la fenêtre du navigateur?

Il existe un moyen jQuery d'écouter les événements de redimensionnement , mais je préférerais ne pas l'inclure dans mon projet pour cette seule exigence.

Answer 1

jQuery encapsule l'événement DOM standard resize , par exemple.

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

jQuery peut effectuer certains travaux pour s'assurer que l'événement de redimensionnement est déclenché de manière cohérente dans tous les navigateurs, mais je ne suis pas sûr que l'un des navigateurs diffère, mais je vous encourage à le tester. Firefox, Safari et IE.

Answer 2

Ne jamais remplacer la fonction window.onresize.

Au lieu de cela, créez une fonction pour ajouter un écouteur d'événement à l'objet ou à l'élément. Cette vérification et si les écouteurs ne fonctionnent pas, alors elle remplace la fonction de l'objet en dernier recours. C’est la méthode préférée utilisée dans des bibliothèques telles que jQuery.

objet : l'objet élément ou window

type : redimensionner, faire défiler (type d'événement)
callback : la référence de la fonction

var addEvent = function(object, type, callback) {
    if (object == null || typeof(object) == 'undefined') return;
    if (object.addEventListener) {
        object.addEventListener(type, callback, false);
    } else if (object.attachEvent) {
        object.attachEvent("on" + type, callback);
    } else {
        object["on"+type] = callback;
    }
};

Ensuite, l'utilisation ressemble à ceci:

addEvent(window, "resize", function_reference);

ou avec une fonction anonyme:

addEvent(window, "resize", function(event) {
  console.log('resized');
});

Answer 3

Tout d'abord, je sais que la méthode addEventListener a été mentionnée dans les commentaires ci-dessus, mais je n'ai vu aucun code. Puisque c'est l'approche privilégiée, la voici:

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

Voici un exemple de travail .

Answer 4

L'événement de redimensionnement ne doit jamais être utilisé directement car il est déclenché en continu au fur et à mesure que nous redimensionnons.

Utilisez une fonction anti-rebond pour limiter les appels en excès.

window.addEventListener ('resize', anti-rebond (gestionnaire, délai, immédiat), false);

Voici un rebond courant sur le net, mais recherchez-en des plus avancés comme featuerd dans lodash.

const debounce = (func, wait, immediate) => {
    var timeout;
    return () => {
        const context = this, args = arguments;
        const later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        const callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

Ceci peut être utilisé comme si ...

window.addEventListener('resize', debounce(() => console.log('hello'),
200, false), false);

Il ne tirera jamais plus d'une fois toutes les 200ms.

Pour les changements d'orientation mobile, utilisez:

window.addEventListener('orientationchange', () => console.log('hello'), false);

Voici une petite bibliothèque que j'ai mise sur pied pour prendre soin de cela proprement.

Answer 5

Je pense que la réponse correcte a déjà été fournie par @Alex V, mais qu'elle nécessite une modernisation car elle a plus de cinq ans maintenant.

Il y a deux problèmes principaux:

1. N'utilisez jamais objet comme nom de paramètre. C'est un mot réservé. Cela dit, la fonction fournie par @Alex V ne fonctionnera pas en mode strict .

2. La fonction addEvent fournie par @Alex V ne renvoie pas l'objet événement si la méthode addEventListener est utilisée. Un autre paramètre doit être ajouté à la fonction addEvent pour permettre cela.

REMARQUE: le nouveau paramètre de addEvent a été rendu facultatif afin que la migration vers cette nouvelle version de la fonction ne rompt pas les appels précédents à cette fonction. Toutes les utilisations héritées seront prises en charge.

Voici la fonction addEvent mise à jour avec les modifications suivantes:

/*
    function: addEvent

    @param: obj         (Object)(Required)

        -   The object which you wish
            to attach your event to.

    @param: type        (String)(Required)

        -   The type of event you
            wish to establish.

    @param: callback    (Function)(Required)

        -   The method you wish
            to be called by your
            event listener.

    @param: eventReturn (Boolean)(Optional)

        -   Whether you want the
            event object returned
            to your callback method.
*/
var addEvent = function(obj, type, callback, eventReturn)
{
    if(obj == null || typeof obj === 'undefined')
        return;

    if(obj.addEventListener)
        obj.addEventListener(type, callback, eventReturn ? true : false);
    else if(obj.attachEvent)
        obj.attachEvent("on" + type, callback);
    else
        obj["on" + type] = callback;
};

Un exemple d'appel à la nouvelle fonction addEvent :

var watch = function(evt)
{
    /*
        Older browser versions may return evt.srcElement
        Newer browser versions should return evt.currentTarget
    */
    var dimensions = {
        height: (evt.srcElement || evt.currentTarget).innerHeight,
        width: (evt.srcElement || evt.currentTarget).innerWidth
    };
};

addEvent(window, 'resize', watch, true);

Answer 6

Merci d'avoir référencé mon billet de blog à l'adresse http : //mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html .

Bien que vous puissiez simplement vous connecter à l’événement de redimensionnement de fenêtre standard, vous constaterez que dans IE, cet événement est déclenché une fois pour chaque mouvement X et X de l'axe Y, ce qui entraîne le déclenchement d'une tonne d'événements susceptibles avoir un impact sur les performances de votre site si le rendu est une tâche intensive.

Ma méthode implique un court délai qui est annulé lors d'événements ultérieurs afin que l'événement ne soit pas diffusé dans votre code jusqu'à ce que l'utilisateur ait fini de redimensionner la fenêtre.

Answer 7

Solution pour 2018 +:

Vous devez utiliser ResizeObserver . Ce sera une solution native pour le navigateur offrant de bien meilleures performances que d’utiliser l’événement resize . De plus, il ne prend pas en charge l'événement sur le document , mais également sur les éléments arbitraires .

var ro = new ResizeObserver( entries => {
  for (let entry of entries) {
    const cr = entry.contentRect;
    console.log('Element:', entry.target);
    console.log(`Element size: ${cr.width}px x ${cr.height}px`);
    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
  }
});

// Observe one or multiple elements
ro.observe(someElement);

À l'heure actuelle, seul Chrome le prend en charge, mais d'autres navigateurs suivront probablement (bientôt). Pour le moment, vous devez utiliser un polyfill .

Answer 8

window.onresize = function() {
    // your code
};

Answer 9

Le message suivant peut vous être utile: Correction de l’événement de redimensionnement de la fenêtre dans IE

Il fournit ce code:

Sys.Application.add_load(function(sender, args) {
    $addHandler(window, 'resize', window_resize);
});

var resizeTimeoutId;

function window_resize(e) {
     window.clearTimeout(resizeTimeoutId);
     resizeTimeoutId = window.setTimeout('doResizeCode();', 10);
}

Answer 10

Les solutions déjà mentionnées ci-dessus ne fonctionneront que si vous souhaitez uniquement redimensionner la fenêtre et la fenêtre uniquement. Toutefois, si vous souhaitez que le redimensionnement soit propagé aux éléments enfants, vous devez propager l'événement vous-même. Voici un exemple de code pour le faire:

window.addEventListener("resize", function () {
  var recResizeElement = function (root) {
    Array.prototype.forEach.call(root.childNodes, function (el) {

      var resizeEvent = document.createEvent("HTMLEvents");
      resizeEvent.initEvent("resize", false, true);
      var propagate = el.dispatchEvent(resizeEvent);

      if (propagate)
        recResizeElement(el);
    });
  };
  recResizeElement(document.body);
});

Notez qu'un élément enfant peut appeler

.

 event.preventDefault();

sur l'objet événement transmis en tant que premier Arg de l'événement de redimensionnement. Par exemple:

var child1 = document.getElementById("child1");
child1.addEventListener("resize", function (event) {
  ...
  event.preventDefault();
});

Answer 11

var EM = new events_managment();

EM.addEvent(window, 'resize', function(win,doc, event_){
    console.log('resized');
    //EM.removeEvent(win,doc, event_);
});

function events_managment(){
    this.events = {};
    this.addEvent = function(node, event_, func){
        if(node.addEventListener){
            if(event_ in this.events){
                node.addEventListener(event_, function(){
                    func(node, event_);
                    this.events[event_](win_doc, event_);
                }, true);
            }else{
                node.addEventListener(event_, function(){
                    func(node, event_);
                }, true);
            }
            this.events[event_] = func;
        }else if(node.attachEvent){

            var ie_event = 'on' + event_;
            if(ie_event in this.events){
                node.attachEvent(ie_event, function(){
                    func(node, ie_event);
                    this.events[ie_event]();
                });
            }else{
                node.attachEvent(ie_event, function(){
                    func(node, ie_event);
                });
            }
            this.events[ie_event] = func;
        }
    }
    this.removeEvent = function(node, event_){
        if(node.removeEventListener){
            node.removeEventListener(event_, this.events[event_], true);
            this.events[event_] = null;
            delete this.events[event_];
        }else if(node.detachEvent){
            node.detachEvent(event_, this.events[event_]);
            this.events[event_] = null;
            delete this.events[event_];
        }
    }
}

Answer 12

<script language="javascript">
    window.onresize = function() {
    document.getElementById('ctl00_ContentPlaceHolder1_Accordion1').style.height = '100%';
} 

</script>