Jak mogę dołączyć detektor zdarzeń resize okna w JavaScript?

Robię wtyczkę JS/PHP do dystrybucji. I ma to być tak łatwe do zainstalowania, ponieważ:Jak mogę dołączyć detektor zdarzeń resize okna w JavaScript?

<HTML> 
<HEAD> 
<TITLE>Testing my Plugin</TITLE> 
<?php 
    include 'path/to/myPlugin.php'; 
    echo getMyPluginHeadContent(); 
?> 
</HEAD> 
<BODY> 
<?php 
    echo getMyPluginContent("Arguments will go here"); 
?> 
</BODY> 
</HTML>

Jednakże chcę tej wtyczki, aby dołączyć okno rozmiaru słuchacza bez nadrzędnymi window.onresize w przypadku istnieją inne skrypty, które również wymagają stosowania ta metoda. Czy istnieje polecenie javascript, takie jak document.addEventListener("resize", myResizeMethod, true);? Wiem, że to nie to, ponieważ to nie działa, a MDN i W3C są bardzo niejasne co do tego, jakie argumenty zabiera addEventListener.

Nie chcę odpowiedzi, która mówi, żebym używał window.onresize = myResizeMethod lub <BODY ONRESIZE="myResizeMethod">, ponieważ nie są one tak przyjazne dla wtyczki.

Źródło

2012-11-30 Supuhstar

Ponieważ staramy się dodać do okna, czy próbowałeś 'window.addEventListener'? – Kyle

Prawie każdy .Na = może być przekształcony w .addEventListener (, ) – bhamlin

@bhamlin: Insightful komentarz, dziękuję. –

Ponieważ próbują wywołać tę funkcję zmiany rozmiaru okna, będziemy chcieli, aby powiązać funkcję do okna, a nie dokumentu. Aby obsługiwać wersje IE mniejsze niż 9, będziesz chciał użyć attachEvent. Pamiętaj, że attachEvent wymaga podania słowa kluczowego . Oto przykład:

if(window.attachEvent) { 
    window.attachEvent('onresize', function() { 
     alert('attachEvent - resize'); 
    }); 
} 
else if(window.addEventListener) { 
    window.addEventListener('resize', function() { 
     console.log('addEventListener - resize'); 
    }, true); 
} 
else { 
    //The browser does not support Javascript event binding 
}

Podobnie można usunąć zdarzenia w taki sam sposób

if(window.detachEvent) { 
    window.detachEvent('onresize', theFunction); 
} 
else if(window.removeEventListener) { 
    window.removeEventListener('resize', theFunction); 
} 
else { 
    //The browser does not support Javascript event binding 
}

Źródło

2012-11-30 19:03:08 Kyle

+1, aby uzyskać pełniejszą odpowiedź niż moja. –

Oprócz zapomnienia ');' w twoim przykładowym kodzie, jest to idealne! Dziękuję Ci! – Supuhstar

@Supuhstar Ups, poprawiono kod. Cieszę się, że udało ci się sprawić, żeby działało. – Kyle

Nie zmieniasz rozmiaru dokumentu, ale okno. To działa:

window.addEventListener("resize", function(){console.log('resize!')}, true);

Źródło

2012-11-30 18:53:32

Jako dodatek do tego, będziesz chciał użyć 'attachEvent' dla wersji IE <9. – Kyle

@Kyle tego nie wiedziałem (moje strony nie są kompatybilne z IE8 lub oparte na jquery). Możesz zbudować własną odpowiedź. W twoim komentarzu widzę, że wiedziałeś także o oknie i dokumencie. –

Dziękuję. Za chwilę podam odpowiedź z przykładem. – Kyle

Jak mogę dołączyć detektor zdarzeń resize okna w JavaScript?

Odpowiedz

Powiązane problemy