เหตุการณ์การปรับขนาดหน้าต่างข้ามเบราว์เซอร์ - JavaScript / jQuery

อะไรคือวิธีที่ถูกต้อง (ทันสมัย) สำหรับการแตะที่หน้าต่างเพื่อปรับขนาดเหตุการณ์ที่ทำงานใน Firefox, WebKitและ Internet Explorer

และคุณสามารถเปิด / ปิดแถบเลื่อนทั้งสองได้หรือไม่

jQuery มีวิธีการในตัวสำหรับสิ่งนี้:

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

เพื่อการตอบสนองของ UI คุณอาจพิจารณาใช้ setTimeout เพื่อเรียกรหัสของคุณหลังจากผ่านไปหลายมิลลิวินาทีดังที่แสดงในตัวอย่างต่อไปนี้ซึ่งได้รับแรงบันดาลใจจากสิ่งนี้ :

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

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

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

    alert('resize');

});

นี่คือวิธีการที่ไม่ใช่ jQuery ของการแตะลงในเหตุการณ์การปรับขนาด:

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

มันทำงานบนเบราว์เซอร์ที่ทันสมัยทั้งหมด มันไม่ได้ช่วยอะไรคุณเลย นี่คือตัวอย่างของการใช้งานจริง

ขออภัยที่จะเปิดกระทู้เก่า แต่ถ้ามีคนไม่ต้องการใช้ jQuery คุณสามารถใช้สิ่งนี้:

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

เนื่องจากคุณเปิดให้ jQuery ปลั๊กอินนี้น่าจะเป็นเคล็ดลับ

การใช้ jQuery 1.9.1 ฉันเพิ่งค้นพบว่าแม้ว่าจะเหมือนกันในทางเทคนิค) * สิ่งนี้ไม่ทำงานใน IE10 (แต่ใน Firefox):

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

ขณะที่สิ่งนี้ใช้ได้กับเบราว์เซอร์ทั้งสอง:

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

แก้ไข:
) * ที่จริงไม่เหมือนกันในทางเทคนิคตามที่ระบุไว้และอธิบายในความคิดเห็นโดยWraithKennyและเฮนรี่ไบลท์

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> 

ฉันคิดว่าปลั๊กอิน jQuery "jQuery resize event" เป็นทางออกที่ดีที่สุดสำหรับการดูแลปริมาณงานเพื่อให้เหมือนกันในทุกเบราว์เซอร์ มันคล้ายกับคำตอบของ Andrews แต่ดีกว่าเนื่องจากคุณสามารถเชื่อมโยงเหตุการณ์การปรับขนาดกับองค์ประกอบ / ตัวเลือกที่เฉพาะเจาะจงเช่นเดียวกับทั้งหน้าต่าง มันเปิดโอกาสใหม่ในการเขียนโค้ดที่ชัดเจน

มีปลั๊กอินให้ใช้งาน ที่นี่

มีปัญหาด้านประสิทธิภาพหากคุณเพิ่มผู้ฟังจำนวนมาก แต่สำหรับกรณีการใช้งานส่วนใหญ่มันสมบูรณ์แบบ

ฉันคิดว่าคุณควรเพิ่มการควบคุมเพิ่มเติมนี้:

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

หวังว่ามันจะช่วยใน jQuery

กำหนดฟังก์ชั่นก่อนหากมีฟังก์ชั่นที่มีอยู่ข้ามไปยังขั้นตอนต่อไป

 function someFun() {
 //use your code
 }

เบราว์เซอร์ที่ปรับขนาดการใช้งานเช่นนี้

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

นอกจากฟังก์ชั่นปรับขนาดหน้าต่างที่กล่าวถึงมันเป็นสิ่งสำคัญที่จะต้องเข้าใจว่าเหตุการณ์การปรับขนาดไฟมากถ้าใช้โดยไม่ต้อง deboucing เหตุการณ์

Paul Irish มีฟังก์ชั่นที่ยอดเยี่ยมที่จะทำการปรับขนาดการโทรได้อย่างมาก แนะนำให้ใช้มาก ๆ ทำงานข้ามเบราว์เซอร์ ทดสอบใน 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...
});