Як запустити подію зміни розміру вікна в JavaScript?


327

Я зареєстрував тригер на розмірі вікна. Я хочу знати, як я можу викликати подію, яку потрібно викликати. Наприклад, коли ховаю div, я хочу, щоб моя тригерна функція була викликана.

Я виявив, що window.resizeTo()може запустити функцію, але чи є якесь інше рішення?

Відповіді:


382

Там, де це можливо, я вважаю за краще викликати функцію, а не відправляти подію. Це добре працює, якщо у вас є контроль над кодом, який ви хочете запустити, але див. Нижче для випадків, коли ви не володієте кодом.

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

6
Ваша анонімна функція не потрібна. window.onresize = doALoadOfStuff; Крім того, це не відповідає на запитання, відповідь пінушона нижче - правильна відповідь.
Денніс Плучінік

42
До питань Google : Подивіться на відповідь @ avetisk.
Фабіан Лауер

1
Це гарна ідея роз’єднати, але в моєму / цьому випадку це не працює. Просто виклик методу зміни розміру не працює, оскільки якщо не змінити розмір вікна, різні інші діви / контейнери не встановлять належну висоту.
PandaWood

@PandaWood - тоді мій останній приклад кращий у вашому випадку.
Фентон

Дякуємо @ user75525
Бондсміт

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

11
здається, працює з Chrome, FF, Safari, але ні: IE!
Дейм М

14
jQuery triggerнасправді не викликає нативної події "зміни розміру". Це запускає лише слухачів подій, доданих за допомогою jQuery. У моєму випадку бібліотека третьої партії слухала безпосередньо рідну подію "зміни розміру", і це рішення, яке працювало для мене.
chowey

2
Прекрасне і просте рішення. Хоча, я думаю, вам слід додати код для сумісності IE (наскільки я бачу, для IE ми маємо використовувати window.fireEvent)
Victor

35
це не працювало на всіх пристроях для мене. мені довелося викликати подію так: var evt = document.createEvent ('UIEvents'); evt.initUIEvent ('змінити розмір', true, false, window, 0); window.dispatchEvent (evt);
Манфред

19
Він не вдається "Об'єкт не підтримує цю дію" в моєму IE11
помбер

156

За допомогою jQuery можна спробувати викликати тригер :

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

3
Випадком для цього є те, коли плагін jQuery використовує події зміни розміру вікна, щоб відповідати, але у вас є бічна панель, що згортається. Змінюється контейнер плагіна, але вікно цього не відбувається.
Ізервуд

4
Дійсно JQuery не потрібен, але я вважаю за краще рішення JQuery, оскільки мій продукт широко використовує JQuery.
Шрі

Куди це буде додано, щоб змінити розмір сторінки WordPress після завантаження?
SAHM

Це не працює для мене в останньому Chrome, ця відповідь робить: stackoverflow.com/a/22638332/1296209
webaholik

1
це те, що я спробував спочатку - не вийшло, але window.dispatchEvent(new Event('resize'));зробив
user2682863

54

Чистий 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);
});

4
На жаль, у документації для UIEvent.initUIEvent () йдеться Do not use this method anymore as it is deprecated.про те, що документи createEvent кажуть "Багато методів, які використовуються з createEvent, наприклад initCustomEvent, застаріли. Замість цього використовуйте конструктори подій ." Ця сторінка виглядає перспективною для подій інтерфейсу користувача.
Гонки на стовпчику

9
Щоправда, але IE11 не підтримує new Event()метод. Я думаю, що ви можете зламати старі браузери if (Event.prototype.initEvent) { /* deprecated method */ } else { /* current method */ }. Де поточний метод - відповідь аветиска .
BrianS

@pomber Дякую за рішення, насправді я намагався викликати власну подію для зміни розміру вікна, щоб змінити розмір моєї діаграми ... ваше рішення зберегти мій день
Дінеш Gopal Chand

49

Поєднання відповідей пам’яті та 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);
}

1
Це хороший спосіб зробити це через веб-переглядачі, не використовуючи jQuery.
кгх

не маю ідеї, чому це не найкраща відповідь ...... це краще, ніж відповіді "або", які приймаються ....
SPillai

14

Насправді я не зміг змусити це працювати з будь-яким із перерахованих вище рішень. Як тільки я пов’язав подію з jQuery, вона спрацювала нормально, як показано нижче:

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

Працює в Chrome сьогодні.
webaholik

9

просто

$(window).resize();

це те, що я використовую ... якщо я не зрозумів, що ти просиш.


3
І навіть якщо у вас є jQuery, він запускає лише події, пов'язані з jQuery.
adamdport

0

Відповідь з 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" >..

0

Я вважаю, що це має працювати для всіх браузерів:

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

Відмінно працює в Chrome та FF, але не працює в IE11
Collins

@Collins - дякую за оновлення, думав, що це я перевірив на IE11 ... Спробую трохи пізніше оновити це, дякую за відгуки.
webaholik

0

Це можна зробити за допомогою цієї бібліотеки. 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);

-3

window.resizeBy()запустить подію onresize вікна. Це працює як у Javascript, так і в VBScript .

window.resizeBy(xDelta, yDelta)називається, як window.resizeBy(-200, -200)скоротити сторінку 200px на 200px.


2
Чому це позначено? Це неправильно? Чи залежить від браузера?
Пітер Вун

2
Це не працює в будь-якому веб-переглядачі: Chrome, Firefox, IE, Firefox.
fregante

1
Firefox 7+ та, ймовірно, інші сучасні браузери більше не дозволяють викликати цей метод у більшості випадків. Крім того, не бажано насправді змінити розмір вікна, щоб викликати подію.
user247702

І resizeBy (), і resizeTo () працюють нормально в останній стабільній версії Chrome. 76.0
VanagaS
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.