Làm cách nào để kích hoạt sự kiện thay đổi kích thước cửa sổ trong JavaScript?

Tôi đã đăng ký một kích hoạt trên cửa sổ thay đổi kích thước. Tôi muốn biết làm thế nào tôi có thể kích hoạt sự kiện được gọi. Ví dụ, khi ẩn một div, tôi muốn hàm kích hoạt của mình được gọi.

Tôi tìm thấy window.resizeTo()có thể kích hoạt chức năng, nhưng có giải pháp nào khác không?

Nếu có thể, tôi thích gọi hàm hơn là gửi một sự kiện. Điều này hoạt động tốt nếu bạn có quyền kiểm soát mã bạn muốn chạy, nhưng xem bên dưới để biết trường hợp bạn không sở hữu mã.

window.onresize = doALoadOfStuff;

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

Trong ví dụ này, bạn có thể gọi doALoadOfStuffhàm mà không cần gửi sự kiện.

Trong các trình duyệt hiện đại của bạn, bạn có thể kích hoạt sự kiện bằng cách sử dụng:

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

Điều này không hoạt động trong Internet Explorer, nơi bạn sẽ phải thực hiện lâu dài:

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

jQuery có triggerphương thức , hoạt động như thế này:

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

Và có cảnh báo:

Mặc dù .trigger () mô phỏng kích hoạt sự kiện, hoàn thành với một đối tượng sự kiện được tổng hợp, nhưng nó không sao chép hoàn hảo một sự kiện xảy ra tự nhiên.

Bạn cũng có thể mô phỏng các sự kiện trên một yếu tố cụ thể ...

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

Với jQuery, bạn có thể thử gọi trình kích hoạt :

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

Một JS thuần túy cũng hoạt động trên IE (từ bình luận @Manfred )

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

Hoặc cho góc:

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

Kết hợp câu trả lời của pomber và avetisk để bao quát tất cả các trình duyệt và không gây ra cảnh báo:

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

Tôi thực sự không thể làm cho nó hoạt động với bất kỳ giải pháp nào ở trên. Khi tôi đã ràng buộc sự kiện với jQuery thì nó hoạt động tốt như sau:

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

chỉ

$(window).resize();

là những gì tôi sử dụng ... trừ khi tôi hiểu sai những gì bạn yêu cầu.

Phản hồi với RxJS

Nói như một cái gì đó trong Angular

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

Nếu đăng ký thủ công mong muốn (Hoặc không góc cạnh)

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

Vì khởi đầu nội bộ của tôi với Giá trị có thể không chính xác (công văn để sửa)

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

Nói Angular (tôi có thể ..)

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

Tôi tin rằng điều này sẽ làm việc cho tất cả các trình duyệt:

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

Bạn có thể làm điều này với thư viện này. 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()sẽ kích hoạt sự kiện onresize của window. Điều này hoạt động trong cả Javascript hoặc VBScript .

window.resizeBy(xDelta, yDelta)được gọi là muốn window.resizeBy(-200, -200)thu nhỏ trang 200px x 200px.