JavaScript에서 창 크기 조정 이벤트를 트리거하는 방법은 무엇입니까?

창 크기 조정에 트리거를 등록했습니다. 이벤트를 호출하는 방법을 알고 싶습니다. 예를 들어 div를 숨길 때 트리거 함수를 호출하고 싶습니다.

내가 발견 window.resizeTo()기능을 실행할 수 있지만, 다른 솔루션은 무엇입니까?

가능한 경우 이벤트를 전달하는 대신 함수를 호출하는 것을 선호합니다. 실행하려는 코드를 제어 할 수 있으면 잘 작동하지만 코드를 소유하지 않은 경우 아래를 참조하십시오.

window.onresize = doALoadOfStuff;

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

이 예에서는 doALoadOfStuff이벤트를 전달하지 않고 함수를 호출 할 수 있습니다 .

최신 브라우저에서 다음을 사용 하여 이벤트 를 트리거 할 수 있습니다 .

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

Internet Explorer에서는 작동하지 않으므로 오랫동안 사용해야합니다.

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

jQuery에는 다음trigger 과 같은 방법 이 있습니다.

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

그리고주의 사항이 있습니다.

.trigger ()는 합성 된 이벤트 객체로 완성 된 이벤트 활성화를 시뮬레이션하지만 자연 발생 이벤트를 완벽하게 복제하지는 않습니다.

특정 요소에서 이벤트를 시뮬레이션 할 수도 있습니다.

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를 사용하면 트리거 를 호출 할 수 있습니다 .

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

IE에서도 작동하는 순수한 JS ( @Manfred comment )

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

또는 각도 :

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

모든 브라우저를 포괄하고 경고를 유발하지 않도록 pomber와 avetisk의 답변을 결합한 경우 :

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

실제로 위의 솔루션 으로이 작업을 수행 할 수 없었습니다. jQuery로 이벤트를 바인딩하면 다음과 같이 정상적으로 작동합니다.

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

다만

$(window).resize();

당신이 요구하는 것을 오해하지 않는 한 내가 사용하는 것입니다.

RxJS로 응답

Angular에서 무언가처럼 말하십시오

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

수동 가입이 필요한 경우 (또는 각도가 아님)

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

초기 시작 값이 올바르지 않을 수 있으므로 (수정을 위해 디스패치)

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

각도라고하면 (나는 할 수 ..)

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

나는 이것이 모든 브라우저에서 작동해야한다고 생각합니다.

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

이 라이브러리에서이 작업을 수행 할 수 있습니다. 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()창의 onresize 이벤트를 트리거합니다. 이것은 자바 스크립트 또는 VBScript 모두에서 작동합니다 .

window.resizeBy(xDelta, yDelta)window.resizeBy(-200, -200)200px x 200px 페이지를 축소하는 것과 같습니다 .