Mendeteksi ketika sebuah jendela diubah ukurannya menggunakan JavaScript?

125

Apakah ada cara dengan jQuery atau JavaScript untuk memicu fungsi ketika pengguna mengakhiri untuk mengubah ukuran jendela browser?

Dalam istilah lain:

Bisakah saya mendeteksi acara mouse up ketika pengguna mengubah ukuran jendela browser? Jika tidak:
Bisakah saya mendeteksi ketika operasi pengubahan ukuran jendela selesai?

Saat ini saya hanya dapat memicu suatu peristiwa ketika pengguna mulai mengubah ukuran jendela dengan jQuery

javascript jquery

— aneuryzm
sumber

3

Ada solusi jQuery dan non-jQuery di sini: github.com/louisremi/jquery-smartresize

— bradt

solusi indah untuk acara deboued jquery-smartresize!

— tetri

@bradt tidak perlu menggunakan plugin jQuery saat ini semua dapat dilakukan dengan cukup mudah di vanilla JavaScript

— James Douglas

240

Anda dapat menggunakan .resize()untuk mendapatkan setiap kali lebar / tinggi benar-benar berubah, seperti ini:

$(window).resize(function() {
  //resize just happened, pixels changed
});

Anda dapat melihat demo yang berfungsi di sini , dibutuhkan nilai tinggi / lebar baru dan memperbaruinya di halaman untuk Anda lihat. Ingat acara tidak benar-benar dimulai atau berakhir , itu hanya "terjadi" ketika perubahan ukuran terjadi ... tidak ada yang mengatakan yang lain tidak akan terjadi.

Sunting: Dengan komentar sepertinya Anda menginginkan sesuatu seperti "on-end" event, solusi yang Anda temukan melakukan ini, dengan beberapa pengecualian (Anda tidak dapat membedakan antara mouse-up dan jeda dengan cara lintas-browser, sama untuk akhir vs jeda ). Anda dapat membuat acara itu, untuk membuatnya sedikit lebih bersih, seperti ini:

$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 500);
});

Anda dapat memiliki ini sebagai file dasar di suatu tempat, apa pun yang ingin Anda lakukan ... maka Anda dapat mengikat ke resizeEndacara baru yang Anda picu, seperti ini:

$(window).bind('resizeEnd', function() {
    //do something, window hasn't changed size in 500ms
});

Anda dapat melihat demo kerja pendekatan ini di sini

— Nick Craver
sumber

1

Itu tergantung pada peramban, kapan dan berapa banyak peristiwa pengubahan ukuran dipecat: quirksmode.org/dom/events/resize.html

— Chris Lercher

@chris_l: Saya tidak yakin seberapa akurat halaman itu lagi ... buka demo yang saya posting di Firefox terbaru, itu akan menyala setiap kali ukurannya berubah di sini. Saya tidak memiliki Opera untuk diuji, mungkin masih berbeda, tetapi mereka setidaknya lebih konsisten daripada yang disarankan quirksmode, saya akan mengirim mereka catatan yang perlu diperbarui.

— Nick Craver

@Nick: Ya, halaman quirksmode hanya mencakup FF hingga 3.1b2 - tapi itu menunjukkan, bahwa itu tergantung pada browser ...

— Chris Lercher

7

Saya hanya ingin mampir dan mengatakan bahwa ini juga dipicu ketika pengguna memperbesar halaman pada perangkat seluler.

— Hoffmann

4

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

— WebWanderer

3

Ini dapat dicapai dengan properti onresize dari antarmuka GlobalEventHandlers dalam JavaScript, dengan menetapkan fungsi ke properti onresize , seperti:

window.onresize = functionRef;

Cuplikan kode berikut menunjukkan ini, dengan konsol mencatat innerWidth dan innerHeight jendela setiap kali diubah ukurannya. (Acara pengubahan ukuran akan menyala setelah jendela diubah ukurannya)

function resize() {
  console.log("height: ", window.innerHeight, "px");
  console.log("width: ", window.innerWidth, "px");
}

window.onresize = resize;

<p>In order for this code snippet to work as intended, you will need to either shrink your browser window down to the size of this code snippet, or fullscreen this code snippet and resize from there.</p>

Luaskan cuplikan

— JSON C11
sumber

3

Cara lain untuk melakukan ini, hanya menggunakan JavaScript, adalah:

window.addEventListener('resize', functionName);

Ini menyala setiap kali ukurannya berubah, seperti jawaban lainnya.

functionName adalah nama fungsi yang dieksekusi ketika jendela diubah ukurannya (tanda kurung pada akhirnya tidak diperlukan).

— James Douglas
sumber

0

Jika Anda ingin memeriksa hanya ketika gulir berakhir, di Vanilla JS, Anda dapat menemukan solusi seperti ini:

Super sangat kompak

var t
window.onresize = () => { clearTimeout(t) t = setTimeout(() => { resEnded() }, 500) }
function resEnded() { console.log('ended') }

Semua 3 kemungkinan kombinasi bersama (ES6)

var t
window.onresize = () => {
    resizing(this, this.innerWidth, this.innerHeight) //1
    if (typeof t == 'undefined') resStarted() //2
    clearTimeout(t); t = setTimeout(() => { t = undefined; resEnded() }, 500) //3
}

function resizing(target, w, h) {
    console.log(`Youre resizing: width ${w} height ${h}`)
}    
function resStarted() { 
    console.log('Resize Started') 
}
function resEnded() { 
    console.log('Resize Ended') 
}

— Claudio Ferraro
sumber