Acara pengubahan ukuran jendela JavaScript

Bagaimana saya bisa menghubungkan ke acara pengubahan ukuran jendela browser?

Ada cara jQuery untuk mendengarkan acara ukuran tetapi saya lebih suka untuk tidak membawanya ke proyek saya hanya untuk persyaratan yang satu ini.

jQuery hanya membungkus resizeacara DOM standar , misalnya.

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

jQuery dapat melakukan beberapa pekerjaan untuk memastikan bahwa acara pengubahan ukuran dipecat secara konsisten di semua browser, tapi saya tidak yakin apakah ada browser yang berbeda, tetapi saya mendorong Anda untuk menguji di Firefox, Safari, dan IE.

Pertama, saya tahu addEventListenermetode ini telah disebutkan dalam komentar di atas, tetapi saya tidak melihat kode apa pun. Karena ini pendekatan yang disukai, ini dia:

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

Ini sampel yang berfungsi .

Jangan pernah menimpa fungsi window.onresize.

Sebaliknya, buat fungsi untuk menambahkan Event Listener ke objek atau elemen. Ini memeriksa dan memetikan pendengar tidak bekerja, maka mengesampingkan fungsi objek sebagai upaya terakhir. Ini adalah metode yang disukai yang digunakan di perpustakaan seperti jQuery.

object: elemen atau objek jendela
type: ubah ukuran, gulir (jenis peristiwa)
callback: referensi fungsi

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

Maka gunakan seperti ini:

addEvent(window, "resize", function_reference);

atau dengan fungsi anonim:

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

Acara pengubahan ukuran tidak boleh digunakan secara langsung karena dipecat secara terus-menerus sebagaimana kita mengubah ukuran.

Gunakan fungsi debounce untuk mengurangi kelebihan panggilan.

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

Berikut ini adalah debounce umum yang melayang di sekitar net, meskipun mencari yang lebih maju sebagai featuerd di lodash.

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

Ini dapat digunakan seperti ...

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

Itu tidak akan pernah menembak lebih dari sekali setiap 200 ms.

Untuk perubahan orientasi seluler gunakan:

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

Ini perpustakaan kecil yang saya kumpulkan untuk merawatnya dengan rapi.

Solusi untuk 2018+:

Anda harus menggunakan ResizeObserver . Ini adalah solusi browser-asli yang memiliki kinerja yang jauh lebih baik daripada menggunakan resizeacara tersebut. Selain itu, tidak hanya mendukung acara di documenttetapi juga sewenang-wenang 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);

Saat ini, Firefox, Chrome, dan Safari mendukungnya . Untuk peramban lain (dan yang lebih lama), Anda harus menggunakan polyfill .

Saya percaya bahwa jawaban yang benar telah disediakan oleh @Alex V, namun jawabannya memang memerlukan beberapa modernisasi karena sudah lebih dari lima tahun sekarang.

Ada dua masalah utama:

1. Jangan pernah gunakan objectsebagai nama parameter. Itu adalah kata yang dipulihkan. Dengan demikian, fungsi yang disediakan @Alex V tidak akan berfungsi strict mode.

2. The addEventfungsi yang disediakan oleh @ Alex V tidak mengembalikan event objectjika addEventListenermetode yang digunakan. Parameter lain harus ditambahkan ke addEventfungsi untuk memungkinkan ini.

CATATAN: Parameter baru addEventtelah dibuat opsional sehingga migrasi ke versi fungsi baru ini tidak akan memutuskan panggilan sebelumnya ke fungsi ini. Semua penggunaan lawas akan didukung.

Berikut adalah addEventfungsi yang diperbarui dengan perubahan ini:

/*
    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;
};

Contoh panggilan ke addEventfungsi baru :

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

Terima kasih telah merujuk posting blog saya di http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html .

Meskipun Anda hanya dapat terhubung ke acara pengubahan ukuran jendela standar, Anda akan menemukan bahwa di IE, acara tersebut dipecat satu kali untuk setiap X dan sekali untuk setiap gerakan sumbu Y, menghasilkan satu ton peristiwa yang dipecat yang mungkin memiliki kinerja berdampak pada situs Anda jika rendering adalah tugas yang intensif.

Metode saya melibatkan batas waktu singkat yang dibatalkan pada acara berikutnya sehingga acara tersebut tidak menggelembung ke kode Anda sampai pengguna selesai mengubah ukuran jendela.

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

Posting blog berikut ini mungkin berguna bagi Anda: Memperbaiki acara mengubah ukuran jendela di IE

Ini menyediakan kode ini:

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

Solusi yang disebutkan di atas akan bekerja jika semua yang Anda ingin lakukan hanya mengubah ukuran jendela dan jendela saja. Namun, jika Anda ingin agar ukurannya disebarkan ke elemen anak, Anda harus menyebarkan acara itu sendiri. Berikut beberapa contoh kode untuk melakukannya:

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

Perhatikan bahwa elemen anak dapat memanggil

 event.preventDefault();

pada objek acara yang dilewatkan sebagai Arg pertama dari ukuran peristiwa. Sebagai contoh:

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

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

</script>

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_];
        }
    }
}