JavaScript venster formaat wijzigen evenement

Hoe kan ik inhaken op een gebeurtenis voor het wijzigen van de grootte van een browservenster?

Er is een jQuery-manier om te luisteren naar resize-gebeurtenissenmaar ik zou het liever niet in mijn project opnemen voor slechts deze ene vereiste.

Antwoord 1, autoriteit 100%

Beste werkwijze is om toe te voegen aan de resize-gebeurtenis.

window.addEventListener('resize', function(event) {
    ...
}, true);

jQuery wikkelt gewoon de standaard DOM-gebeurtenis resizein, bijv.

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

jQuery kanwat werk doen om ervoor te zorgen dat de resize-gebeurtenis consistent wordt geactiveerd in alle browsers, maar ik weet niet zeker of een van de browsers verschilt, maar ik raad u aan om te testen in Firefox, Safari en IE.

Antwoord 2, autoriteit 89%

Ten eerste, ik weet dat de methode addEventListeneris genoemd in de opmerkingen hierboven, maar ik heb geen code gezien. Aangezien dit de voorkeursbenadering is, is het hier:

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

Hier is een werkend voorbeeld.

Antwoord 3, autoriteit 78%

Nooit de functie window.onresize overschrijven.

Maak in plaats daarvan een functie om een gebeurtenislistener aan het object of element toe te voegen.
Dit controleert en in het geval dat de luisteraars niet werken, heft het de functie van het object op als laatste redmiddel. Dit is de voorkeursmethode die wordt gebruikt in bibliotheken zoals jQuery.

object: het element of vensterobject
type: formaat wijzigen, scrollen (type gebeurtenis)
callback: de functiereferentie

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

Het gebruik is dan als volgt:

addEvent(window, "resize", function_reference);

of met een anonieme functie:

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

Antwoord 4, autoriteit 6%

De resize-gebeurtenis mag nooit rechtstreeks worden gebruikt, omdat deze continu wordt geactiveerd terwijl we de grootte wijzigen.

Gebruik een debounce-functie om het teveel aan oproepen te verminderen.

window.addEventListener('resize',debounce(handler, delay, immediate),false);

Hier is een veelvoorkomende debounce die rond het net zweeft, maar zoek naar meer geavanceerde zoals vermeld in 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);
    };
};

Dit kan zo worden gebruikt…

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

Het zal nooit meer dan eens per 200 ms afgaan.

Gebruik voor wijzigingen in de mobiele oriëntatie:

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

Hier is een kleine bibliotheekdie ik heb samengesteld om dit netjes te regelen.

Antwoord 5, autoriteit 6%

Oplossing voor 2018+:

U moet ResizeObservergebruiken. Het is een browser-native oplossing die veel betere prestaties levert dan het gebruik van de gebeurtenis resize. Bovendien ondersteunt het niet alleen de gebeurtenis op het documentmaar ook op willekeurige elements.

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

Op dit moment Firefox, Chrome, Safari en Edge steun die zij . Voor andere (en ouder) browsers moet je een polyfill .

Antwoord 6, Autoriteit 2%

Ik geloof dat het juiste antwoord reeds is verstrekt door @Alex V, maar het antwoord vereist enige modernisering zoals het nu is meer dan vijf jaar oud zijn.

Er zijn twee belangrijke zaken:

1. Nooit gebruik objectals parameter naam. Het is een reservered woord. Met Dit gezegd zijnde, @Alex V’s voor zover de functie zal niet werken in strict mode.

2. addEventdoor @Alex V niet event objectterugkeren als het addEventListenermethode. Een andere parameter moet worden toegevoegd aan de addEventfunctie mogelijk te maken voor dit.

Opmerking: De nieuwe parameter addEventis facultatief gemaakt, zodat de migratie naar deze nieuwe functie versie zal geen eerdere oproepen om deze functie te breken. Alle legacy-toepassingen zullen worden ondersteund.

Hier is de bijgewerkte addEventfunctie met deze veranderingen:

/*
    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;
};

Een voorbeeld aanroep van de nieuwe functie 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);

Antwoord 7, autoriteit 2%

Bedankt voor het verwijzen naar mijn blogpost op http ://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html.

Hoewel je gewoon kunt aansluiten op de standaard gebeurtenis voor het wijzigen van de grootte van het venster, zul je zien dat in IE de gebeurtenis één keer wordt geactiveerd voor elke X- en één keer voor elke beweging van de Y-as, wat resulteert in een heleboel gebeurtenissen die kunnen worden geactiveerd. invloed hebben op de prestaties van uw site als weergave een intensieve taak is.

Mijn methode houdt een korte time-out in die bij volgende evenementen wordt geannuleerd, zodat de gebeurtenis niet naar uw code wordt gepompt totdat de gebruiker klaar is met het wijzigen van het formaat van het venster.

Antwoord 8

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

Antwoord 9

De volgende blogpost kan nuttig zijn voor u: Bevestig het venster de grootte van het formaat in IE

Het biedt deze 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);
}

Antwoord 10

De reeds vermelde oplossingen hierboven zullen werken als alles wat u wilt doen, is het gebruik van het venster en het venster alleen. Als u echter de wijziging van het formaat aan kinderelementen wilt hebben, moet u het evenement zelf verspreiden. Hier is een voorbeeldcode om het te doen:

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

Merk op dat een kindelement

kan bellen

event.preventDefault();

Over het evenementobject dat wordt ingevoerd als het eerste args van de grootte van het formaat. Bijvoorbeeld:

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

Antwoord 11

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

Antwoord 12

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_];
        }
    }
}

Antwoord 13

U kunt de volgende aanpak gebruiken, die goed is voor kleine projecten

<body onresize="yourHandler(event)">