JavaScript'te pencere yeniden boyutlandırma olayı nasıl tetiklenir?

Pencere yeniden boyutlandırmasında bir tetikleyici kaydettim. Aranacak etkinliği nasıl tetikleyebileceğimi bilmek istiyorum. Örneğin, bir div'ı gizlerken tetikleyici işlevimin çağrılmasını istiyorum.

window.resizeTo()İşlevi tetikleyebileceğini buldum , ancak başka bir çözüm var mı?

Mümkün olduğunda, bir olay göndermek yerine işlevi çağırmayı tercih ederim. Çalıştırmak istediğiniz kod üzerinde kontrolünüz varsa bu işe yarar, ancak kodun sahibi olmadığınız durumlar için aşağıya bakın.

window.onresize = doALoadOfStuff;

function doALoadOfStuff() {
    //do a load of stuff
}

Bu örnekte, doALoadOfStuffbir olay göndermeden işlevi çağırabilirsiniz .

Modern tarayıcılarınızda, etkinliği aşağıdakileri kullanarak tetikleyebilirsiniz :

window.dispatchEvent(new Event('resize'));

Bu, uzun elinizi yapmanız gereken Internet Explorer'da çalışmaz:

var resizeEvent = window.document.createEvent('UIEvents'); 
resizeEvent.initUIEvent('resize', true, false, window, 0); 
window.dispatchEvent(resizeEvent);

jQuery, aşağıdakitrigger gibi çalışan bir yönteme sahiptir :

$(window).trigger('resize');

Ve uyarı var:

.Trigger (), sentezlenmiş bir olay nesnesiyle tamamlanan bir olay etkinleştirmesini simüle etse de, doğal olarak oluşan bir olayı mükemmel şekilde çoğaltmaz.

Ayrıca belirli bir öğedeki etkinlikleri simüle edebilirsiniz ...

function simulateClick(id) {
  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });

  var elem = document.getElementById(id); 

  return elem.dispatchEvent(event);
}

window.dispatchEvent(new Event('resize'));

JQuery ile, tetikleyiciyi çağırmayı deneyebilirsiniz :

$(window).trigger('resize');

IE üzerinde de çalışan saf bir JS ( @Manfred yorumundan )

var evt = window.document.createEvent('UIEvents'); 
evt.initUIEvent('resize', true, false, window, 0); 
window.dispatchEvent(evt);

Veya açısal için:

$timeout(function() {
    var evt = $window.document.createEvent('UIEvents'); 
    evt.initUIEvent('resize', true, false, $window, 0); 
    $window.dispatchEvent(evt);
});

Tüm tarayıcıları kapsayacak ve uyarılara neden olmayan bombacı ve avetisk'in cevaplarını birleştirmek:

if (typeof(Event) === 'function') {
  // modern browsers
  window.dispatchEvent(new Event('resize'));
} else {
  // for IE and other old browsers
  // causes deprecation warning on modern browsers
  var evt = window.document.createEvent('UIEvents'); 
  evt.initUIEvent('resize', true, false, window, 0); 
  window.dispatchEvent(evt);
}

Aslında yukarıdaki çözümlerden herhangi biriyle çalışmasını sağlayamadım. Bir kez jQuery ile olay bağlı sonra aşağıdaki gibi iyi çalıştı:

$(window).bind('resize', function () {
    resizeElements();
}).trigger('resize');

sadece

$(window).resize();

ne istediğimi yanlış anlamadım.

RxJS ile yanıt

Açısal bir şey gibi söyle

size$: Observable<number> = fromEvent(window, 'resize').pipe(
            debounceTime(250),
            throttleTime(300),
            mergeMap(() => of(document.body.clientHeight)),
            distinctUntilChanged(),
            startWith(document.body.clientHeight),
          );

Manuel abonelik isteniyorsa (Veya Açısal Değil)

this.size$.subscribe((g) => {
      console.log('clientHeight', g);
    })

Benim intial yana startWith Değeri yanlış (düzeltilmesi için sevk) olabilir

window.dispatchEvent(new Event('resize'));

Açısal olarak (yapabilirim ..)

<div class="iframe-container"  [style.height.px]="size$ | async" >..

Bunun tüm tarayıcılar için çalışması gerektiğine inanıyorum:

var event;
if (typeof (Event) === 'function') {
    event = new Event('resize');
} else { /*IE*/
    event = document.createEvent('Event');
    event.initEvent('resize', true, true);
}
window.dispatchEvent(event);

Bunu bu kütüphane ile yapabilirsiniz. https://github.com/itmor/events-js

const events = new Events();

events.add({  
  blockIsHidden: () =>  {
    if ($('div').css('display') === 'none') return true;
  }
});

function printText () {
  console.log('The block has become hidden!');
}

events.on('blockIsHidden', printText);

window.resizeBy()pencerenin onresize olayını tetikleyecektir. Bu, her iki çalışır JavaScript veya VBScript .

window.resizeBy(xDelta, yDelta)window.resizeBy(-200, -200)sayfa 200px 200px küçültmek için denir .