JavaScript pəncərəsini yenidən ölçmək üçün hadisə

Brauzer pəncərəsini yenidən ölçmə fəaliyyətinə necə qoşula bilərəm?

İşdə ölçüsüz hadisələri dinləmək üçün jQuery metodu , ancaq mən bu layihəni yalnız bu tələb üçün əlavə etməməyi xahiş edirəm.

513
13 марта '09 в 11:50 2009-03-13 11:50 Dead hesabı 13 Mart '09 saat 11:50 'də təyin olundu , 2009-03-13 11:50
@ 12 cavab

JQuery, məsələn, standart resize DOM hadisəsini sadəcə tamamlayır.

554
13 марта '09 в 11:58 2009-03-13 11:58 Cavab 13 iyul 2009- cu il tarixdə saat 11:58 'də olliej tərəfindən verilmişdir

Heç vaxt window.onresize funksiyasını ləğv etməyin.

Bunun yerinə, obyekt və ya elementə bir hadisə dinləyicisi əlavə etmək üçün bir funksiya yaradın. Bu dinləyiciləri yoxlayır və ayırır, işləmir, sonra isə obyektin funksiyasını son çarə kimi əvəz edir. Bu jQuery kimi kitabxanalarda istifadə edilən üstün üsuldur.

object : pəncərə elementi və ya obyekt
type : resize, kaydır (hadisə növü)
callback : funksiya istinad

 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; } }; 
border=0

Sonra istifadə edin:

 addEvent(window, "resize", function_reference); 

və ya anonim funksiyası ilə:

 addEvent(window, "resize", function(event) { console.log('resized'); }); 
483
30 июня '10 в 17:19 2010-06-30 17:19 Cavab 30 İyun tarixində saat 17 : 19-da Aleks V tərəfindən verilmişdir

Birincisi, mən bilirəm ki, addEventListener metodu yuxarıda göstərilən addEventListener qeyd olundu, amma heç bir kod görmədim. Bu üstünlük anlayışı olduğundan, burada:

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

İşdə bir nümunə .

434
29 авг. Jondlm tərəfindən verilmiş cavab 29 avqust 2013-08-29 23:32 '13 at 23:32 2013-08-29 23:32

Bir ölçüsüz hadisə, ölçünün dəyişməsi kimi davamlı olaraq işlədiyi üçün heç vaxt birbaşa istifadə edilməməlidir.

Artıq zəngləri azaltmaq üçün danışıq sistemindən istifadə edin.

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

Şəbəkə ətrafında ümumi bir pop-up paketi var, baxmayaraq ki, onlar lodash bir featuerd kimi daha inkişaf etmiş olanları axtarır.

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

Bu kimi istifadə edilə bilər ...

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

Hər 200 ms-dən bir dəfədən artıq atəş açmayacaqdır.

Mobil yönümlü dəyişikliklər üçün istifadə edin:

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

Burada səliqəli bir qayğı göstərmək üçün birlikdə qoyduğum kiçik bir kitabxana .

18
06 апр. cavab verildi. Tanımsız Apr 06 2017-04-06 06:12 '17 'da 6:12' də 2017-04-06 06:12 'də

Hesab edirəm ki, doğru cavab @Alex V tərəfindən verilmişdir, amma cavab bir neçə modernləşdirmə tələb edir, çünki artıq beş ildən çoxdur.

İki əsas problem var:

  • Parametr adı kimi object istifadə etməyin. Bu ehtiyat sözdür. Bu nəzərə alınmaqla, strict mode işləməyəcək @ Alex V funksiyası işləməyəcəkdir.

  • @Alex V tərəfindən verilən addEvent funksiyası addEventListener üsulu addEventListener bir event object qaytarmaz. Əlavə funksiyaya əlavə etmək üçün başqa parametr əlavə edilməlidir.

Qeyd. Yeni addEvent parametri isteğe bağlı olub, bu funksiyaya keçid bu funksiyaya əvvəlki zəngləri pozmur. Bütün əvvəlki istifadə olunacaq.

Bu dəyişikliklərlə yenilənmiş addEvent funksiyası:

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

Yeni addEvent funksiyasını çağırmaq üçün bir nümunə:

 var watch = function(evt) {  var dimensions = { height: (evt.srcElement || evt.currentTarget).innerHeight, width: (evt.srcElement || evt.currentTarget).innerWidth }; }; addEvent(window, 'resize', watch, true); 
15
05 окт. Cavab WebWanderer 05 oct tərəfindən verilir . 2015-10-05 21:38 '15 'da 21:38' de, 2015-10-05 21:38

Mənim blogunuza keçid üçün təşəkkür edirik http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html .

Siz sadəcə standart pəncərə ölçüsünü dəyişən hadisələrə qoşula bilsən də, IE-də hər bir X üçün bir dəfə və hər Y ekseni hərəkətində bir dəfə tetiklenir ve sitenizi etkileyebilecek bir tonluk olaya yol açır göstərilməsi sıx bir vəzifədir.

Mənim metodu, sonrakı hadisələrdə ləğv edilən qısa bir zamanaşımı ehtiva edir, belə ki istifadəçi pəncərənin ölçüsünü dəyişməyincə, hadisə kodunuza düşməsin.

13
05 дек. 05 dekabrda Steven tərəfindən verilmiş cavab 2009-12-05 21:50 '09 at 09:50 PM 2009-12-05 21:50
10
16 нояб. Cavab 16 noyabrda saravanakumar verilir. 2009-11-16 08:27 '09 at 08:27 'da 2009-11-16 08:27

2018-ci il üçün həll:

ResizeObserver istifadə etməlisiniz . resize etkinliğini kullanmaktan çok daha yaxşı performansı olan özel bir tarayıcı çözümü olacaq. Bundan əlavə, bu hadisə yalnız document həm də özbaşına 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); 

Hal-hazırda yalnız Chrome dəstəklənir , lakin digər brauzerlər çox güman ki (tezliklə) təqib edərlər. İndi polipollərdən istifadə etməlisiniz .

6
20 марта '18 в 13:00 2018-03-20 13:00 Cavab 20 mart '18 'də saat 13.00' də verilir. 2018-03-20 13:00

Aşağıdakı blog yazısı sizin üçün faydalı ola bilər: IE-də bir pəncərə ölçüsünü dəyişmək

Bu kod təmin edir:

 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); } 
6
13 марта '09 в 12:00 2009-03-13 12:00 Cavab lakshmanaraj tərəfindən 13 Mart 13: 00-da verilir. 2009-03-13 12:00

Əgər istəsəniz, pəncərəni və pəncərəni yenidən ölçmək lazımdırsa, yuxarıda göstərilən həllər işləyəcəkdir. Yenidən boyutlandırmanın uşaqlara çatmasını istəyirsənsə, hadisəni özünüzə yaymaq lazımdır. Bunun üçün nümunə kodudur:

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

Bir uşaq elementi səbəb ola biləcəyini unutmayın

  event.preventDefault(); 

İlk Arg ölçüsünü verən hadisə obyekti üçün. Məsələn:

 var child1 = document.getElementById("child1"); child1.addEventListener("resize", function (event) { ... event.preventDefault(); }); 
2
20 апр. 20 apreldə rysama tərəfindən verilmiş cavab 2014-04-20 06:55 '14 da 6:55 2014-04-20 06:55
 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_]; } } } 
1
01 сент. Cavab verilir AMAZING 01 sentyabr. 2015-09-01 21:18 '15 'da 21:18' de, 2015-09-01 21:18
 <script > 
1
13 апр. 13 Martda Rob Herring tərəfindən verilmiş cavab 2011-04-13 23:30 '11 saat 23:30 'da 2011-04-13 23:30

yazıları ilə bağlı digər suallar və ya bir sual