जावास्क्रिप्ट में घटना का आकार बदलने के लिए विंडो को कैसे ट्रिगर करें?

Question

मैंने खिड़की के आकार पर एक ट्रिगर दर्ज किया है। मैं जानना चाहता हूं कि मैं इस घटना को कैसे ट्रिगर कर सकता हूं। उदाहरण के लिए, जब कोई डिव छिपाता है, तो मैं चाहता हूं कि मेरा ट्रिगर फंक्शन बुलाया जाए।

मैंने पाया window.resizeTo()कि फ़ंक्शन को ट्रिगर किया जा सकता है, लेकिन क्या कोई अन्य समाधान है?

Answer 1

जहां संभव हो, मैं किसी घटना को भेजने के बजाय फ़ंक्शन को कॉल करना पसंद करता हूं। यदि आप जिस कोड को चलाना चाहते हैं, उस पर नियंत्रण होने पर यह अच्छी तरह से काम करता है, लेकिन उन मामलों के लिए नीचे देखें जहां आपके पास कोड नहीं है।

window.onresize = doALoadOfStuff;

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

इस उदाहरण में, आप doALoadOfStuffकिसी ईवेंट को भेजे बिना फ़ंक्शन को कॉल कर सकते हैं ।

अपने आधुनिक ब्राउज़रों में, आप ईवेंट का उपयोग करके ट्रिगर कर सकते हैं :

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

यह Internet Explorer में काम नहीं करता है, जहाँ आपको longhand करना होगा:

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

Comments

आपका अनाम फ़ंक्शन अनावश्यक है। window.onresize = doALoadOfStuff; इसके अलावा, यह सवाल का जवाब नहीं देता है, नीचे दिए गए पिनचून का जवाब सही जवाब है।

— डेनिस प्लूसिनिक

करने के लिए गूगल आर के: @ avetisk के जवाब पर एक नज़र डालें।

— फेबियन लाउर

इसे ठीक करना एक अच्छा विचार है, लेकिन मेरे / इस मामले में, यह काम नहीं करता है। बस आकार बदलने की विधि को कॉल करने से काम नहीं चलता है क्योंकि यदि विंडो का आकार बदल जाता है तो विभिन्न अन्य div / कंटेनरों को ट्रिगर नहीं किया जाता है, उचित ऊंचाई सेट नहीं होगी।

— पांडावुड

@PandaWood - तो मेरा आखिरी उदाहरण आपके मामले में बेहतर है।

— फेंटन

धन्यवाद @ user75525

— बॉन्डस्मिथ

Answer 2

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

Comments

Chrome, FF, Safari के साथ काम करना लगता है, लेकिन नहीं: IE!

— डेव एम।

jQuery triggerवास्तव में देशी "आकार" घटना को ट्रिगर नहीं करता है। यह केवल ईवेंट श्रोताओं को ट्रिगर करता है जिन्हें jQuery का उपयोग करके जोड़ा गया है। मेरे मामले में, एक 3 पार्टी पुस्तकालय देशी "आकार" घटना को सीधे सुन रहा था और यह वह समाधान है जिसने मेरे लिए काम किया।

— चौबे

महान और सरल उपाय। हालाँकि, मुझे लगता है कि आपको IE संगतता के लिए कुछ कोड जोड़ना चाहिए (जहाँ तक मैं देख रहा हूँ, IE के लिए, हमें उपयोग करना होगा window.fireEvent)

— विक्टर

यह मेरे लिए सभी उपकरणों पर काम नहीं करता है। मुझे इस तरह घटना को ट्रिगर करना पड़ा: var evt = document.createEvent ('UIEvents'); evt.initUIEvent ('आकार', सत्य, असत्य, खिड़की, 0); window.dispatchEvent (evt);

— मैनफ्रेड

यह मेरे IE11 में "ऑब्जेक्ट इस क्रिया का समर्थन नहीं करता है" के साथ विफल रहता है

— pomber

Answer 3

JQuery के साथ, आप ट्रिगर को कॉल करने का प्रयास कर सकते हैं :

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

Comments

इसके लिए एक उपयोग का मामला है जब एक jQuery प्लगइन उत्तरदायी होने के लिए विंडो आकार परिवर्तन की घटनाओं का उपयोग करता है, लेकिन आपके पास एक ढहने वाला साइडबार है। प्लगइन का कंटेनर आकार बदल जाता है, लेकिन विंडो नहीं करता है।

— इशरवुड

वास्तव में JQuery की कोई आवश्यकता नहीं है लेकिन मैं JQuery समाधान पसंद करता हूं क्योंकि मेरा उत्पाद JQuery का बड़े पैमाने पर उपयोग करता है।

— श्री

इसे लोड करने के बाद एक वर्डप्रेस पेज का आकार बदलने के लिए कहां जोड़ा जाएगा?

— SAHM

यह मेरे लिए नवीनतम Chrome में काम नहीं कर रहा है, यह उत्तर देता है: stackoverflow.com/a/22638332/129696209

— webaholik

यह वही है जो मैंने शुरू में कोशिश की window.dispatchEvent(new Event('resize'));थी

— 16:26 पर user2682863

Answer 4

एक शुद्ध JS जो IE पर भी काम करता है ( @ प्रबंधक टिप्पणी से )

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

Comments

दुर्भाग्य के लिए दस्तावेज़ UIEvent.initUIEvent () कहते हैंDo not use this method anymore as it is deprecated. createEvent डॉक्स का कहना है कि "createEvent के साथ उपयोग किए जाने वाले कई तरीके, जैसे initCustomEvent, पदावनत हैं। इसके बजाय ईवेंट कंस्ट्रक्टर्स का उपयोग करें ।" यह पृष्ठ UI ईवेंट के लिए आशाजनक लगता है।

— रेसिंग टैडपोल

यह सच है, लेकिन IE11 new Event()विधि का समर्थन नहीं करता है । मुझे लगता है कि पुराने ब्राउज़रों के खिलाफ एक हैक के रूप में आप कुछ ऐसा कर सकते हैंif (Event.prototype.initEvent) { /* deprecated method */ } else { /* current method */ } । जहाँ वर्तमान विधि अचिसक का उत्तर है ।

— ब्रायनएस

@pomber समाधान के लिए धन्यवाद, वास्तव में मैं अपने चार्ट का आकार बदलने के लिए विंडो के लिए कस्टम इवेंट को ट्रिगर करने का प्रयास कर रहा था ... आपका समाधान मेरा दिन बचाए

— दिनेश गोपाल चंद

Answer 5

सभी ब्राउज़रों को कवर करने और चेतावनियों का कारण न बनने के लिए पॉमर और एवेटिस्क के उत्तरों को संयोजित करना:

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

Comments

यह jQuery का उपयोग किए बिना ब्राउज़र में इसे करने का एक अच्छा तरीका है।

— किग्राक्स

पता नहीं यह शीर्ष उत्तर क्यों नहीं है ...... यह स्वीकार किए जाते हैं कि "या तो" उत्तर से बेहतर है ....

— SPillai

Answer 6

मैं वास्तव में उपरोक्त किसी भी समाधान के साथ काम करने में सक्षम नहीं था। एक बार जब मैंने jQuery के साथ घटना को बाध्य किया तो यह नीचे के रूप में ठीक काम किया:

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

Comments

आज क्रोम में काम करता है।

— वेबहॉलिक

Answer 7

केवल

$(window).resize();

मैं क्या उपयोग करता हूं ... जब तक मैं गलत नहीं समझ रहा हूं कि आप क्या पूछ रहे हैं।

Comments

और यहां तक ​​कि अगर आपके पास jQuery है, तो यह केवल उन घटनाओं को ट्रिगर करता है जो jQuery के साथ बंधे थे।

— adamdport

Answer 8

आरएक्सजेएस के साथ प्रतिक्रिया

कहो जैसा कुछ कोणीय में

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" >..

Answer 9

मेरा मानना ​​है कि यह सभी ब्राउज़रों के लिए काम करना चाहिए:

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

Comments

Chrome और FF में बढ़िया काम करता है, लेकिन IE11 में काम नहीं किया

— Collins

@ कोलिन्स - अपडेट के लिए धन्यवाद, सोचा कि मैंने इसे IE11 पर सत्यापित किया था ... मैं इसे अपडेट करने के लिए कुछ समय लेने की कोशिश करूंगा, प्रतिक्रिया के लिए धन्यवाद।

— वेबहॉलिक

Answer 10

आप इस पुस्तकालय के साथ कर सकते हैं। 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);

Answer 11

window.resizeBy()ट्रिगर विंडो की घटना को ट्रिगर करेगा। यह जावास्क्रिप्ट या VBScript दोनों में काम करता है ।

window.resizeBy(xDelta, yDelta)window.resizeBy(-200, -200)पेज 200px को 200px से सिकोड़ना पसंद है।

Comments

इसे नीचे क्यों चिह्नित किया गया है? क्या यह गलत है? क्या यह ब्राउज़र पर निर्भर है?

— पीटर

यह किसी भी ब्राउज़र में काम नहीं करता है: क्रोम, फ़ायरफ़ॉक्स, IE, फ़ायरफ़ॉक्स परीक्षण किया गया।

— फ्रीगेट

फ़ायरफ़ॉक्स 7+, और शायद अन्य आधुनिक ब्राउज़र, अब ज्यादातर मामलों में इस पद्धति को कॉल करने की अनुमति नहीं देते हैं। इसके अलावा, यह वास्तव में इस घटना को ट्रिगर करने के लिए खिड़की का आकार बदलने के लिए वांछनीय नहीं है।

— user247702

दोनों resizeBy () और resizeTo () नवीनतम स्थिर क्रोम ver में ठीक काम कर रहे हैं। 76.0

— वनाग्सेस