จะทริกเกอร์เหตุการณ์การปรับขนาดหน้าต่างใน 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');

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

การรวมคำตอบของ 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

พูดว่าชอบบางสิ่งในเชิงมุม

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 คูณ 200px