जावास्क्रिप्ट विंडो आकार घटना

Question

मैं ब्राउज़र विंडो आकार बदलने की घटना में कैसे हुक कर सकता हूं?

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

Comments

सभी को धन्यवाद। मैं IE के बारे में परवाह नहीं है, मैं एक मोबाइल फोन पर ओपेरा के लिए आकार बदलने के बारे में अधिक सोच रहा था।

— डेड अकाउंट

Answer 1

jQuery सिर्फ मानक resizeDOM ईवेंट को लपेट रहा है , जैसे।

window.onresize = function(event) {
    ...
};

jQuery यह सुनिश्चित करने के लिए कुछ काम कर सकता है कि आकार परिवर्तन की घटना सभी ब्राउज़रों में लगातार निकाल दी जाए, लेकिन मुझे यकीन नहीं है कि कोई भी ब्राउज़र अलग है, लेकिन मैं आपको फ़ायरफ़ॉक्स, सफारी और IE में परीक्षण करने के लिए प्रोत्साहित करूंगा।

Comments

इस विधि के साथ एक संभावित गेटछा यह है कि आप घटना को ओवरराइड कर रहे हैं और इसलिए आप एक इवेंट में कई क्रियाओं को संलग्न नहीं कर सकते हैं। AddEventListener / संलग्नई कॉम्बो किसी भी अन्य स्क्रिप्ट के साथ अपने जावास्क्रिप्ट को खेलने के लिए जाने के लिए सबसे अच्छा तरीका है जो पृष्ठ पर निष्पादित हो सकता है।

— MyItchyChin

var onresize = window.onresize; window.onresize = function (event) {if (टाइपो ऑनरसाइज === 'फंक्शन') onresize (); / ** ... * /}

— SubOne

window.addEventListener('resize', function(){}, true);

— वेबवंडर

@SubOne एक आदर्श उदाहरण है कि किसी को कभी भी ऐसा नहीं करना चाहिए।

— यूजीन पानकोव

ECMAScript 6 : window.onresize = () => { /* code */ };या इससे बेहतर:window.addEventListener('resize', () => { /* code */ });

— Derk Jan Speelman

Answer 2

सबसे पहले, मुझे पता है कि इस addEventListenerविधि का उल्लेख उपरोक्त टिप्पणियों में किया गया है, लेकिन मुझे कोई कोड दिखाई नहीं दिया। चूंकि यह पसंदीदा तरीका है, यहाँ यह है:

window.addEventListener('resize', function(event){
  // do stuff here
});

यहां एक काम का नमूना है ।

Comments

यह सबसे सीधा जवाब है।

— जेकोविज़ा

सबसे अच्छा जवाब की तरह लगता है क्योंकि आपके खिड़की पर ओवरराइटिंग नहीं है। घटना को :-):

— जेम्स हैरिंगटन

कई लोग इस उदाहरण में आपके जैसे गुमनाम घटना श्रोताओं को जोड़ते हैं, लेकिन यह वास्तव में अच्छा अभ्यास नहीं है, क्योंकि इस दृष्टिकोण से बाद में इन श्रोताओं को हटाना असंभव हो जाता है। यह कोई समस्या नहीं थी क्योंकि वेब पेज वैसे भी अल्पकालिक थे, लेकिन इस दिन और एजेक्स और आरआईए और एसपीए की उम्र में यह एक होता जा रहा है। हमें इवेंट श्रोताओं के जीवनचक्र को प्रबंधित करने का एक तरीका चाहिए। इस प्रकार, श्रोता कार्य को एक अलग कार्य में लगाना बेहतर होगा ताकि बाद में इसे हटाया जा सके removeEventListener।

— स्टिजन डे विट

क्यों हर कोई इस तरह का जवाब नहीं दे सकता है बिना सब

— फुलझड़ी के

मुझे लगता है कि Stijn de Witt's और quemeful के उत्तर दोनों के लिए सच्चाई है। कभी-कभी आप ईवेंट श्रोताओं को हटाने के बारे में परवाह करते हैं, लेकिन उस मामले में जो आप नहीं करते हैं, ऊपर के उदाहरण में उस सभी अतिरिक्त कोड को जोड़ना अनावश्यक है और यह ब्लोट और कम पठनीयता दोनों के लिए कर सकता है। मेरी राय में, यदि आप श्रोता को हटाने के लिए एक कारण की कल्पना नहीं करते हैं, तो यह दृष्टिकोण सबसे अच्छा समाधान है। यदि आवश्यक हो तो आप इसे बाद में फिर से लिख सकते हैं। मेरे अनुभव में, ये विशिष्ट परिस्थितियों में ही उत्पन्न होते हैं।

— काजॉर्ट

Answer 3

कभी भी window.onresize फ़ंक्शन को ओवरराइड न करें।

इसके बजाय, ऑब्जेक्ट या तत्व में एक ईवेंट श्रोता को जोड़ने के लिए एक फ़ंक्शन बनाएं। यह जाँच करता है और श्रोताओं को काम नहीं करने देता है, तो यह एक अंतिम उपाय के रूप में ऑब्जेक्ट के फ़ंक्शन को ओवरराइड करता है। यह jQuery जैसे पुस्तकालयों में उपयोग की जाने वाली पसंदीदा विधि है।

object: तत्व या विंडो ऑब्जेक्ट
type: आकार, स्क्रॉल (ईवेंट प्रकार)
callback: फ़ंक्शन संदर्भ

var addEvent = function(object, type, callback) {
    if (object == null || typeof(object) == 'undefined') return;
    if (object.addEventListener) {
        object.addEventListener(type, callback, false);
    } else if (object.attachEvent) {
        object.attachEvent("on" + type, callback);
    } else {
        object["on"+type] = callback;
    }
};

फिर उपयोग इस तरह है:

addEvent(window, "resize", function_reference);

या एक अनाम फ़ंक्शन के साथ:

addEvent(window, "resize", function(event) {
  console.log('resized');
});

Comments

यह स्वीकृत उत्तर होना चाहिए था। ओवरराइडिंग पर काबू पाना सिर्फ बुरा अभ्यास है।

— तिबरियू-आयनू स्टेन

हह, सभी अतिरिक्त अशक्त जांच के साथ क्या है? IE 4.5 या कुछ और में काम करने की कोशिश कर रहा?

— फ्लेवर्डस्केप

और आप सोच रहे हैं कि मैं इस फ़ंक्शन को विंडो आकार बदलने की घटनाओं को कैसे प्राप्त करूं? यहाँ बताया गया है: addEvent (विंडो, "आकार", function_reference); :)

— ओबार्का

ध्यान दें कि IE 11 के रूप में, attachEventअब समर्थित नहीं है। भविष्य के लिए पसंदीदा तरीका है addEventListener।

— ल्यूक

से सावधान रहें elem == undefined। यह संभव है (हालांकि संभावना नहीं है) कि "अपरिभाषित" को स्थानीय रूप से कुछ और के रूप में परिभाषित किया गया है। stackoverflow.com/questions/8175673/…

— ल्यूक

Answer 4

आकार बदलने वाली घटना को कभी भी सीधे उपयोग नहीं किया जाना चाहिए क्योंकि यह निरंतर रूप से निकाल दिया जाता है जैसा कि हम आकार बदलते हैं।

अतिरिक्त कॉल को कम करने के लिए एक डेबिट फ़ंक्शन का उपयोग करें।

window.addEventListener('resize',debounce(handler, delay, immediate),false);

यहाँ नेट के चारों ओर एक आम बहस चल रही है, हालांकि लेश में करियर के रूप में अधिक उन्नत लोगों की तलाश है।

const debounce = (func, wait, immediate) => {
    var timeout;
    return () => {
        const context = this, args = arguments;
        const later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        const callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

इस तरह इस्तेमाल किया जा सकता है ...

window.addEventListener('resize', debounce(() => console.log('hello'),
200, false), false);

यह कभी भी 200 से अधिक बार हर बार फायर नहीं करेगा।

मोबाइल अभिविन्यास परिवर्तन के लिए उपयोग करें:

window.addEventListener('orientationchange', () => console.log('hello'), false);

यहाँ एक छोटा सा पुस्तकालय है जिसे मैंने बड़े करीने से रखा।

Comments

मैं जानकारी की सराहना करता हूं: पराजय addEventListener के लिए (केवल इसलिए कि पुराने उत्तर वास्तव में इस बारे में टिप्पणियों को स्पष्ट रूप से संबोधित नहीं करते हैं)

— wunth

FYI करें जब से आप ES6 एरो फंक नोटेशन का उपयोग कर रहे हैं, आंतरिक फ़ंक्शन को (...arguments) => {...}(या ...argsकम भ्रम के लिए) की आवश्यकता है क्योंकि argumentsवेरिएबल अब उनके दायरे में उपलब्ध नहीं है।

— कोडरचेत

मैं पूरी तरह से अवगत हूं, कि स्निपेट मेरा कोड नहीं है, यह सिर्फ एक उदाहरण के रूप में है।

— frontsideup

महान जवाब, आकार के साथ पूर्ण मुद्दों को संबोधित करने की आवश्यकता है! डिबॉन्सेसिंग एक विकल्प है, एक और सरल गला घोंटना है (जो कि "चरण" में आकार देने के लिए आपके UI की आवश्यकता होने पर जाने का तरीका हो सकता है)। उदाहरण के लिए bencentra.com/code/2015/02/27/optimizing-window-resize.html देखें

— रॉबिन मेराल

Answer 5

2018+ के लिए समाधान:

आपको ResizeObserver का उपयोग करना चाहिए । यह एक ब्राउज़र-देशी समाधान है जिसमें resizeघटना का उपयोग करने की तुलना में बहुत बेहतर प्रदर्शन है । इसके अलावा, यह न केवल घटना का समर्थन करता है, documentबल्कि मनमाने ढंग से भी होता है elements।

var ro = new ResizeObserver( entries => {
  for (let entry of entries) {
    const cr = entry.contentRect;
    console.log('Element:', entry.target);
    console.log(`Element size: ${cr.width}px x ${cr.height}px`);
    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
  }
});

// Observe one or multiple elements
ro.observe(someElement);

वर्तमान में, फ़ायरफ़ॉक्स, क्रोम और सफारी इसका समर्थन करते हैं । अन्य (और पुराने) ब्राउज़रों के लिए आपको एक पॉलीफ़िल का उपयोग करना होगा ।

Comments

अभी भी 2020 imo में सबसे अच्छा जवाब

— जेसी रजा खोरासनई

mdn लिंक: developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

— Seph

Answer 6

मुझे विश्वास है कि @ एलेक्स वी द्वारा सही उत्तर पहले ही प्रदान किया जा चुका है, फिर भी उत्तर में कुछ आधुनिकीकरण की आवश्यकता है क्योंकि यह पांच साल से अधिक पुराना है।

दो मुख्य मुद्दे हैं:

1. objectपैरामीटर नाम के रूप में कभी भी उपयोग न करें । यह एक पुनर्जीवन शब्द है। इसके साथ ही कहा जा रहा है, @Alex V का दिया गया फंक्शन काम नहीं करेगा strict mode।

2. addEvent@Alex वी द्वारा प्रदान समारोह वापस नहीं करता event objectहै, तो addEventListenerविधि का इस्तेमाल किया जाता है। इसके addEventलिए अनुमति देने के लिए फ़ंक्शन में एक और पैरामीटर जोड़ा जाना चाहिए ।

नोट: नए पैरामीटर को addEventवैकल्पिक बनाया गया है ताकि इस नए फ़ंक्शन संस्करण में माइग्रेट करने से इस फ़ंक्शन के लिए कोई भी पिछला कॉल नहीं टूटेगा। सभी विरासत उपयोगों का समर्थन किया जाएगा।

addEventइन परिवर्तनों के साथ यहां अपडेट किया गया कार्य है:

/*
    function: addEvent

    @param: obj         (Object)(Required)

        -   The object which you wish
            to attach your event to.

    @param: type        (String)(Required)

        -   The type of event you
            wish to establish.

    @param: callback    (Function)(Required)

        -   The method you wish
            to be called by your
            event listener.

    @param: eventReturn (Boolean)(Optional)

        -   Whether you want the
            event object returned
            to your callback method.
*/
var addEvent = function(obj, type, callback, eventReturn)
{
    if(obj == null || typeof obj === 'undefined')
        return;

    if(obj.addEventListener)
        obj.addEventListener(type, callback, eventReturn ? true : false);
    else if(obj.attachEvent)
        obj.attachEvent("on" + type, callback);
    else
        obj["on" + type] = callback;
};

नए addEventफ़ंक्शन के लिए एक उदाहरण कॉल :

var watch = function(evt)
{
    /*
        Older browser versions may return evt.srcElement
        Newer browser versions should return evt.currentTarget
    */
    var dimensions = {
        height: (evt.srcElement || evt.currentTarget).innerHeight,
        width: (evt.srcElement || evt.currentTarget).innerWidth
    };
};

addEvent(window, 'resize', watch, true);

Comments

मैं तर्क दूंगा कि संलग्नक अब 2017 में प्रासंगिक नहीं है।

— व्लाद निकुला

@VladNicula मैं सहमत होगा, लेकिन यह उत्तर दो साल पुराना है।

— वेबवंडर

Answer 7

Http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html पर मेरे ब्लॉग पोस्ट को संदर्भित करने के लिए धन्यवाद ।

जब आप केवल मानक विंडो आकार परिवर्तन ईवेंट को हुक कर सकते हैं, तो आप पाएंगे कि IE में, ईवेंट को प्रत्येक X के लिए एक बार निकाल दिया जाता है और प्रत्येक Y अक्ष आंदोलन के लिए, जिसके परिणामस्वरूप एक टन की घटनाओं को निकाल दिया जाता है, जिसमें एक प्रदर्शन हो सकता है आपकी साइट पर प्रभाव यदि प्रतिपादन एक गहन कार्य है।

मेरी विधि में एक छोटी समयावधि शामिल है जो बाद की घटनाओं पर रद्द हो जाती है ताकि उपयोगकर्ता आपके कोड तक बुदबुदाए नहीं जब तक कि उपयोगकर्ता ने विंडो का आकार बदलना समाप्त नहीं कर दिया हो।

Answer 8

window.onresize = function() {
    // your code
};

Comments

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

— ल्यूक

Answer 9

निम्न ब्लॉग पोस्ट आपके लिए उपयोगी हो सकती है: IE में विंडो के आकार को ठीक करने वाली घटना

यह यह कोड प्रदान करता है:

Sys.Application.add_load(function(sender, args) {
    $addHandler(window, 'resize', window_resize);
});

var resizeTimeoutId;

function window_resize(e) {
     window.clearTimeout(resizeTimeoutId);
     resizeTimeoutId = window.setTimeout('doResizeCode();', 10);
}

Comments

यह केवल ASP.NET अनुप्रयोगों पर लागू होता है

— एवगेनी गोरब

Answer 10

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

window.addEventListener("resize", function () {
  var recResizeElement = function (root) {
    Array.prototype.forEach.call(root.childNodes, function (el) {

      var resizeEvent = document.createEvent("HTMLEvents");
      resizeEvent.initEvent("resize", false, true);
      var propagate = el.dispatchEvent(resizeEvent);

      if (propagate)
        recResizeElement(el);
    });
  };
  recResizeElement(document.body);
});

ध्यान दें कि एक बच्चा तत्व कॉल कर सकता है

 event.preventDefault();

इवेंट ऑब्जेक्ट पर जो आकार परिवर्तन इवेंट के पहले Arg के रूप में पास किया गया है। उदाहरण के लिए:

var child1 = document.getElementById("child1");
child1.addEventListener("resize", function (event) {
  ...
  event.preventDefault();
});

Answer 11

<script language="javascript">
    window.onresize = function() {
    document.getElementById('ctl00_ContentPlaceHolder1_Accordion1').style.height = '100%';
} 

</script>

Answer 12

var EM = new events_managment();

EM.addEvent(window, 'resize', function(win,doc, event_){
    console.log('resized');
    //EM.removeEvent(win,doc, event_);
});

function events_managment(){
    this.events = {};
    this.addEvent = function(node, event_, func){
        if(node.addEventListener){
            if(event_ in this.events){
                node.addEventListener(event_, function(){
                    func(node, event_);
                    this.events[event_](win_doc, event_);
                }, true);
            }else{
                node.addEventListener(event_, function(){
                    func(node, event_);
                }, true);
            }
            this.events[event_] = func;
        }else if(node.attachEvent){

            var ie_event = 'on' + event_;
            if(ie_event in this.events){
                node.attachEvent(ie_event, function(){
                    func(node, ie_event);
                    this.events[ie_event]();
                });
            }else{
                node.attachEvent(ie_event, function(){
                    func(node, ie_event);
                });
            }
            this.events[ie_event] = func;
        }
    }
    this.removeEvent = function(node, event_){
        if(node.removeEventListener){
            node.removeEventListener(event_, this.events[event_], true);
            this.events[event_] = null;
            delete this.events[event_];
        }else if(node.detachEvent){
            node.detachEvent(event_, this.events[event_]);
            this.events[event_] = null;
            delete this.events[event_];
        }
    }
}