Відповіді:
Там, де це можливо, я вважаю за краще викликати функцію, а не відправляти подію. Це добре працює, якщо у вас є контроль над кодом, який ви хочете запустити, але див. Нижче для випадків, коли ви не володієте кодом.
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'));
trigger
насправді не викликає нативної події "зміни розміру". Це запускає лише слухачів подій, доданих за допомогою jQuery. У моєму випадку бібліотека третьої партії слухала безпосередньо рідну подію "зміни розміру", і це рішення, яке працювало для мене.
window.fireEvent
)
За допомогою jQuery можна спробувати викликати тригер :
$(window).trigger('resize');
window.dispatchEvent(new Event('resize'));
зробив
Чистий JS, який також працює на IE (з коментаря @Manfred )
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);
});
Do not use this method anymore as it is deprecated.
про те, що документи createEvent кажуть "Багато методів, які використовуються з createEvent, наприклад initCustomEvent, застаріли. Замість цього використовуйте конструктори подій ." Ця сторінка виглядає перспективною для подій інтерфейсу користувача.
Поєднання відповідей пам’яті та 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');
Відповідь з RxJS
Скажіть, як щось у кутовому
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);
})
Оскільки моє початкове значенняWith Value може бути неправильним (відправлення для виправлення)
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 вікна. Це працює як у Javascript, так і в VBScript .
window.resizeBy(xDelta, yDelta)
називається, як window.resizeBy(-200, -200)
скоротити сторінку 200px на 200px.