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" >..
window.resizeBy()
창의 onresize 이벤트를 트리거합니다. 이것은 Javascript 또는 VBScript 모두에서 작동합니다 .
window.resizeBy(xDelta, yDelta)
window.resizeBy(-200, -200)
200px x 200px 페이지를 축소하는 것과 같습니다 .
참고 URL : https://stackoverflow.com/questions/1818474/how-to-trigger-the-window-resize-event-in-javascript
'Programing' 카테고리의 다른 글
str_replace를 사용하여 첫 번째 경기에서만 작동합니까? (0) | 2020.03.17 |
---|---|
Android : listView 클릭시 강조 표시 비활성화 (0) | 2020.03.17 |
옵션이있는 명령 줄에서 .sql 파일을 내보내고 가져 오는 방법은 무엇입니까? (0) | 2020.03.17 |
비동기 작업을 동 기적으로 대기하는 이유와 여기서 Wait ()가 프로그램을 정지시키는 이유 (0) | 2020.03.17 |
언제 클래스 대신 구조체를 사용해야합니까? (0) | 2020.03.17 |