क्रॉस-ब्राउज़र विंडो का आकार घटना - जावास्क्रिप्ट / jQuery

Question

फायरफॉक्स, वेबकीट और इंटरनेट एक्सप्लोरर में काम करने वाली घटना का आकार बदलने के लिए सही (आधुनिक) तरीका क्या है ?

और क्या आप दोनों स्क्रॉलबार को चालू / बंद कर सकते हैं?

Comments

मैं भी इस पर गौर कर रहा हूं। मैं यहां दिए गए समाधानों को लागू करने का प्रयास करना चाहता हूं, लेकिन मुझे डर है कि मैं वाक्य रचना को नहीं समझता: $ (विंडो)। क्या यह कुछ विशेष है?

— 23

Byff, हाँ, $ (विंडो) एक jQuery का निर्माण है। window.onresize कच्चे जावास्क्रिप्ट में बराबर है।

— एंड्रयू हेजेस

इस डेमो सभी ब्राउज़रों पर परीक्षण करने के लिए किसी को भी मदद मिल सकती है jsfiddle.net/subodhghulaxe/bHQV5/2

— सुबोध Ghulaxe

window.dispatchEvent(new Event('resize')); stackoverflow.com/questions/1818474/…

— डायलन वालेड

ओपेरा ऑन मोबाइल पर यह हर बार चालू होता है शीर्ष बार (ब्राउज़र UI) दिखा रहा है / छुपा रहा है।

— psur

Answer 1

jQuery के पास इसके लिए एक अंतर्निहित विधि है:

$(window).resize(function () { /* do something */ });

यूआई जवाबदेही के लिए, यदि आप एक setTimeout का उपयोग कर के रूप में निम्न उदाहरण में दिखाया गया है, से प्रेरित, केवल मिलीसेकेंड में से कुछ संख्या के बाद अपने कोड को कॉल करने पर विचार हो सकता है इस :

function doSomething() {
    alert("I'm done resizing for the moment");
};

var resizeTimer;
$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(doSomething, 100);
});

Comments

जब विंडो को बटन के साथ पूर्ण स्क्रीन तक विस्तारित किया जाता है तो यह घटना क्यों नहीं निकाल दी जाती है?

— स्ली

@ मेरे लिए यह मैक पर सफारी, क्रोम और मोज़िला में काम करता है। आप किस ब्राउज़र का उपयोग करते हैं?

— मार्क विटैल

@ साली:$('.button').on({ click: function(){ /* your code */ $(window).trigger('resize') })

— ज़ैक ज़तकिन-गोल्ड

एलिजा, यह जावास्क्रिप्ट है। आपने जो लिखा है वह सही नहीं है (एक विशिष्ट मामले को छोड़कर जब आप नए के साथ निर्माण कर रहे हैं)।

— योह सुजुकी

यह ध्यान देने योग्य है कि यह jQuery फ़ंक्शन "फ़ंक्शन" को फ़ंक्शन की वर्तमान सूची में कॉल करता है जिसे विंडो आकार बदलना चाहिए। यह मौजूदा घटनाओं को अधिलेखित नहीं करता है जो वर्तमान में विंडो आकार में शेड्यूल किए गए हैं।

— आरटीएफ

Answer 2

$(window).bind('resize', function () { 

    alert('resize');

});

Comments

मैं बाइंड एप्रोच को पसंद करता हूं, क्योंकि आकार () विधि वास्तव में पूर्ण बाइंड एप्रोच का एक शॉर्टकट है, और मैं अक्सर पाता हूं कि आमतौर पर एक इवेंट हैंडलर से अधिक मैं एक तत्व पर लागू होना चाहिए।

— माइक कोरमेंडी सेप

@ माइक - इतना ही नहीं, लेकिन मैं अनुमान लगा रहा हूं कि जिस विधि से आप श्रोता को हटाना चाहते हैं, उस आकार परिवर्तन विधि में "अनबाइंड" विधि नहीं है। "बाइंड" निश्चित रूप से जाने का रास्ता है!

— शेन

Answer 3

यहाँ आकार बदलने की घटना में दोहन का गैर- jQuery तरीका है:

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

यह सभी आधुनिक ब्राउज़रों पर काम करता है। यह आपके लिए कुछ भी नहीं फेंकता है। एक्शन में इसका एक उदाहरण है।

Comments

यह समाधान IE में काम नहीं करेगा। IE डोम के समर्थन के साथ फिक्स्ड संस्करण: stackoverflow.com/questions/6927637/…

— सेर्गेई

> यह आपके लिए कुछ भी नहीं फेंकता है। क्या आप कृपया विस्तार से बता सकते हैं? क्या / यह गला घोंटना चाहिए? क्या यह एक पंक्ति में कई बार गोलीबारी की घटना से संबंधित है?

— जॉसिनलो जू

@josinalvo आम तौर पर जब आप एक ऐसी घटना सुन रहे होते हैं जो बहुत आगजनी करता है तो आप बहस करना चाहते हैं (उदाहरण दर्ज) ताकि आप अपने कार्यक्रम में अड़चन पैदा न करें।

— जोंडलेम

Answer 4

एक पुराना धागा लाने के लिए क्षमा करें, लेकिन अगर कोई jQuery का उपयोग नहीं करना चाहता है तो आप इसका उपयोग कर सकते हैं:

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

Comments

बस ध्यान रखें कि यह किसी भी मौजूदा हैंडलर को बंद कर देगा जो कि window.onresize के लिए बाध्य हो सकता है। यदि आपकी स्क्रिप्ट को अन्य स्क्रिप्ट के साथ एक पारिस्थितिकी तंत्र को जीना है, तो आपको यह नहीं मानना ​​चाहिए कि आपकी स्क्रिप्ट केवल एक ही है जो खिड़की के आकार पर कुछ करना चाहती है। यदि आप jQuery जैसे किसी फ्रेमवर्क का उपयोग नहीं कर सकते हैं, तो आपको कम से कम मौजूदा window.onresize को हथियाने पर विचार करना चाहिए, और अपने हैंडलर को इसे पूरी तरह से जोड़ने के बजाय, इसे समाप्त करना चाहिए।

— टॉम ऑगस्टर

@TomAuger "आपको कम से कम मौजूदा विंडो को हथियाने पर विचार करना चाहिए ? मैं वास्तव में एक जावास्क्रिप्ट कोड देखना चाहूंगा जो पहले से मौजूद फ़ंक्शन के अंत में कुछ जोड़ देगा :-)

— TMS

मैं आपकी बात को एक अर्थ में देखता हूं - आपका नया onResize हैंडलर मौजूदा onResize को लपेटने की आवश्यकता है। हालाँकि, इसे उस फ़ंक्शन को कॉल नहीं करना है जिसे आप onResize जोड़ना चाहते थे, जब तक कि इसे मूल onResize हैंडलर नहीं कहा जाता। तो आप अभी भी सुनिश्चित कर सकते हैं कि आपका नया onResize फ़ंक्शन मूल onResize फ़ंक्शन के बाद निष्पादित होता है, जो संभवतः रिवर्स से बेहतर है।

— टॉम ऑलर

Answer 5

चूंकि आप jQuery के लिए खुले हैं, इसलिए यह प्लगइन ट्रिक करता है।

Answer 6

1.9.1 jQuery का उपयोग करना, मुझे अभी पता चला है कि, हालांकि तकनीकी रूप से समान) *, यह IE10 में काम नहीं करता था (लेकिन फ़ायरफ़ॉक्स में):

// did not work in IE10
$(function() {
    $(window).resize(CmsContent.adjustSize);
});

जबकि यह दोनों ब्राउज़रों में काम करता है:

// did work in IE10
$(function() {
    $(window).bind('resize', function() {
        CmsContent.adjustSize();
    };
});

संपादित करें :)
* वास्तव में तकनीकी रूप से समान नहीं है , जैसा कि WraithKenny और हेनरी Blyth द्वारा टिप्पणियों में बताया और समझाया गया है ।

Comments

दो बदलाव हैं। किस पर असर पड़ा? ( .resize()करने के लिए .bind('resize')? या अनाम समारोह जोड़ने मैं सोच रहा हूँ यह दूसरा है।)

— WraithKenny

@ अच्छी बात है। यह बहुत अच्छी तरह से हो सकता है कि अनाम फ़ंक्शन को जोड़ने से यह काम किया गया था। मुझे याद नहीं अगर मैंने यह कोशिश की।

— बासिम

पहले मामले में, adjustSizeविधि अपना संदर्भ खो देती है this, जबकि दूसरी कॉल CmsContent.adjustSize()संरक्षित रहती है this, अर्थात this === CmsContent। यदि विधि CmsContentमें उदाहरण की आवश्यकता है adjustSize, तो पहला मामला विफल हो जाएगा। दूसरा मामला हर तरह के फ़ंक्शन कॉल के लिए काम करेगा, इसलिए यह हमेशा एक गुमनाम फ़ंक्शन को पारित करने की सिफारिश की जाती है।

— हेनरी बेलीथ

@HenryBlyth धन्यवाद! +1

— बासिम

Answer 7

jQuery$(window).resize()डिफ़ॉल्ट रूप से कार्य प्रदान करता है:

<script type="text/javascript">
// function for resize of div/span elements
var $window = $( window ),
    $rightPanelData = $( '.rightPanelData' )
    $leftPanelData = $( '.leftPanelData' );

//jQuery window resize call/event
$window.resize(function resizeScreen() {
    // console.log('window is resizing');

    // here I am resizing my div class height
    $rightPanelData.css( 'height', $window.height() - 166 );
    $leftPanelData.css ( 'height', $window.height() - 236 );
});
</script> 

Answer 8

मुझे लगता है कि jQuery प्लगइन "jQuery आकार घटना" इस के लिए सबसे अच्छा समाधान होने के रूप में यह घटना को थ्रॉटलिंग का ख्याल रखता है ताकि यह सभी ब्राउज़रों में समान काम करे। यह एंड्रयूज के उत्तर के समान है, लेकिन बेहतर है कि आप विशिष्ट ईवेंट / चयनकर्ताओं के साथ-साथ संपूर्ण विंडो के आकार परिवर्तन को हुक कर सकते हैं। यह साफ कोड लिखने के लिए नई संभावनाओं को खोलता है।

प्लगइन यहाँ उपलब्ध है

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

Answer 9

मुझे लगता है कि आपको इस पर और नियंत्रण जोड़ना चाहिए:

    var disableRes = false;
    var refreshWindow = function() {
        disableRes = false;
        location.reload();
    }
    var resizeTimer;
    if (disableRes == false) {
        jQuery(window).resize(function() {
            disableRes = true;
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(refreshWindow, 1000);
        });
    }

Answer 10

आशा है कि यह jQuery में मदद करेगा

किसी फ़ंक्शन को पहले परिभाषित करें, अगर कोई मौजूदा फ़ंक्शन है तो अगले चरण पर जाएं।

 function someFun() {
 //use your code
 }

ब्राउज़र इस तरह के उपयोग का आकार परिवर्तन करता है।

 $(window).on('resize', function () {
    someFun();  //call your function.
 });

Answer 11

खिड़की के आकार के कार्यों के अलावा उल्लेख किया गया है कि यह समझना महत्वपूर्ण है कि आकार बदलने वाली घटनाओं को बहुत कम किया जाता है अगर घटनाओं को बिना बहस के उपयोग किया जाता है।

पॉल आयरिश का एक उत्कृष्ट कार्य है जो आकार बदलने वाले कॉल को एक महान सौदा बताता है। उपयोग करने के लिए बहुत अनुशंसित है। क्रॉस-ब्राउज़र काम करता है। दूसरे दिन IE8 में इसका परीक्षण किया गया और सब ठीक रहा।

http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

सुनिश्चित करें डेमो देखना अंतर देखने के लिए।

यहाँ पूर्णता के लिए कार्य है।

(function($,sr){

  // debouncing function from John Hann
  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  var debounce = function (func, threshold, execAsap) {
      var timeout;

      return function debounced () {
          var obj = this, args = arguments;
          function delayed () {
              if (!execAsap)
                  func.apply(obj, args);
              timeout = null;
          };

          if (timeout)
              clearTimeout(timeout);
          else if (execAsap)
              func.apply(obj, args);

          timeout = setTimeout(delayed, threshold || 100);
      };
  }
  // smartresize 
  jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

})(jQuery,'smartresize');


// usage:
$(window).smartresize(function(){
  // code that takes it easy...
});