JavaScript penceresi yeniden boyutlandırma etkinliği

Tarayıcı penceresi yeniden boyutlandırma etkinliğine nasıl bağlanabilirim?

Orada yeniden boyutlandırma olayları dinleyerek bir jQuery yolu ama sadece bu bir gereksinimi için projemde hale getirmek için tercih ediyorum.

jQuery sadece standart resizeDOM olayını tamamlıyor, örn.

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

jQuery olabilir boyutlandırma olay tüm tarayıcılarda tutarlı kovuluyor sağlamak için bazı işler yapmak, ancak tarayıcılardan herhangi farklılık olmadığından emin değilim, ama ben Firefox, Safari ve IE test etmek öneririm.

Öncelikle, addEventListeneryöntem yukarıdaki yorumlarda belirtildiğini biliyorum , ancak herhangi bir kod görmedim. Tercih edilen yaklaşım olduğu için burada:

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

İşte çalışan bir örnek .

Asla window.onresize işlevini geçersiz kılmayın.

Bunun yerine, nesneye veya öğeye Olay Dinleyici eklemek için bir işlev oluşturun. Bu, dinleyicilerin çalışmadığını denetler ve kapatır, daha sonra nesnenin işlevini son çare olarak geçersiz kılar. Bu, jQuery gibi kütüphanelerde kullanılan tercih edilen yöntemdir.

object: öğe veya pencere nesnesi
type: yeniden boyutlandır, kaydırma (olay türü)
callback: işlev başvurusu

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

O zaman kullanım şöyle:

addEvent(window, "resize", function_reference);

veya anonim bir işlevle:

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

Yeniden boyutlandırma olayı, yeniden boyutlandırdığımız gibi sürekli tetiklendiğinden asla doğrudan kullanılmamalıdır.

Fazla aramaları azaltmak için bir geri dönme işlevi kullanın.

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

Burada, ağ etrafında yüzen ortak bir geri dönme var, ancak daha gelişmiş olanları lodash'da featuerd olarak arayın.

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

Bu şekilde kullanılabilir ...

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

Asla her 200 ms'de bir defadan fazla ateş etmeyecektir.

Mobil yönlendirme değişiklikleri için şunları kullanın:

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

İşte bununla ilgilenmek için bir araya getirdiğim küçük bir kütüphane .

2018+ için çözüm:

ResizeObserver kullanmalısınız . resizeEtkinliği kullanmaktan çok daha iyi performansa sahip tarayıcıya özgü bir çözümdür . Ayrıca, olayı sadece değil document, keyfi olarak da destekler 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);

Şu anda Firefox, Chrome ve Safari destekliyor . Diğer (ve daha eski) tarayıcılar için bir çoklu dolgu kullanmanız gerekir .

@Alex V tarafından doğru cevabın verildiğine inanıyorum, ancak cevap beş yıldan daha eski olduğu için biraz modernizasyon gerektiriyor.

İki ana konu vardır:

1. Asla objectparametre adı olarak kullanmayın . Korunmuş bir kelimedir. Bununla birlikte, @Alex V'nin sağlanan işlevi çalışmayacaktır strict mode.

2. addEvent@Alex V tarafından temin edilmekte olan işlev dönmez event objectise addEventListeneryöntemi kullanılır. Buna addEventizin vermek için işleve başka bir parametre eklenmelidir .

NOT: Yeni parametre, addEventbu yeni işlev sürümüne geçişin bu işleve yapılan önceki çağrıları bozmaması için isteğe bağlı hale getirilmiştir. Tüm eski kullanımlar desteklenecektir.

İşte addEventbu değişikliklerle güncellenmiş fonksiyon:

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

Yeni addEventişleve örnek bir çağrı :

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

Http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html adresindeki blog yayınımı referans aldığınız için teşekkür ederiz .

Standart pencere yeniden boyutlandırma etkinliğine bağlanabilirken, IE'de etkinliğin her X için bir kez ve her Y ekseni hareketi için bir kez tetiklendiğini görürsünüz. oluşturma yoğun bir işse siteniz üzerindeki etkisi.

Metodum, kullanıcı pencereyi yeniden boyutlandırmayı bitirinceye kadar olayın kodunuza kadar kabarmaması için, sonraki olaylarda iptal edilen kısa bir zaman aşımı içerir.

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

Aşağıdaki blog yayını sizin için yararlı olabilir: IE'de pencere yeniden boyutlandırma olayını düzeltme

Bu kodu sağlar:

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

Yukarıda belirtilen çözümler, tek yapmanız gereken yalnızca pencereyi ve pencereyi yeniden boyutlandırmaksa işe yarayacaktır. Ancak, yeniden boyutlandırmanın alt öğelere yayılmasını istiyorsanız, etkinliği kendiniz yaymanız gerekir. İşte bunu yapmak için bazı örnek kod:

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

Bir alt öğenin arayabileceğini unutmayın

 event.preventDefault();

resize olayının ilk Arg'si olarak iletilen olay nesnesinde. Örneğin:

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

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

</script>

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