Pokaż szerokość i wysokość bieżące wartości na zmianę rozmiaru okna

Question

W głowie html:

<script type="text/javascript"> 
    var myWidth = 0, myHeight = 0; 
    if(typeof(window.innerWidth) == 'number') { 
     myWidth = window.innerWidth; myHeight = window.innerHeight; 
    } else if(document.documentElement && (document.documentElement.clientWidth ||document.documentElement.clientHeight)) { 
     myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; 
    } else if(document.body && (document.body.clientWidth || document.body.clientHeight)) { 
     myWidth = document.body.clientWidth; myHeight = document.body.clientHeight; 
    } 
</script> 

W organizmie html:

<script type="text/javascript"> 
    document.write('<p>' + myWidth + 'x' + myHeight + '</p>'); 
</script> 

To działa dobrze. Pytanie brzmi: w jaki sposób mogę wyświetlać wartości szerokości/wysokości podczas zmiany rozmiaru przeglądarki? Jak tutaj http://quirktools.com/screenfly/ w lewym dolnym rogu.

Wielkie dzięki!

Answer 1

Powiąż z window.onresize. Nie używaj document.write(). Umieść kod <p> w kodzie HTML i nadaj mu identyfikator. Następnie wystarczy ustawić innerHTML elementu bezpośrednio:

window.onresize = displayWindowSize; 
window.onload = displayWindowSize; 
function displayWindowSize() { 
    // your size calculation code here 
    document.getElementById("dimensions").innerHTML = myWidth + "x" + myHeight; 
}; 

Answer 2

Lub, jeśli jesteś już przy użyciu jQuery, można użyć .resize(handler) uchwycić zdarzenia zmiany rozmiaru i .resize() bez żadnych parametrów, aby wywołać początkowe zdarzenie, gdy okno jest ładowanie ukończone.

Jak to:

$(window).resize(function() { 
    // your size calculation code here 
    $("#dimensions").html(myWidth); 
}).resize(); 

Demo in Fiddle

Answer 3

Lubię rozwiązanie gilly3, ale dobrze byłoby, aby mieć pełny kod

<script> 
    window.onresize = displayWindowSize; 
    window.onload = displayWindowSize; 

    function displayWindowSize() { 
     myWidth = window.innerWidth; 
     myHeight = window.innerHeight; 
     // your size calculation code here 
     document.getElementById("dimensions").innerHTML = myWidth + "x" + myHeight; 
    }; 
</script>