hiển thị sống width và height giá trị về việc thay đổi cửa sổ thay đổi kích thước

Question

Trong đầu 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> 

Trong nội dung html:

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

Nó hoạt động tốt. Câu hỏi đặt ra là: làm thế nào tôi có thể có nó để hiển thị các giá trị chiều rộng/chiều cao trong khi thay đổi kích thước trình duyệt? Giống như ở đây http://quirktools.com/screenfly/ ở góc dưới cùng bên trái.

Rất cám ơn!

Answer 1

Liên kết với window.onresize. Không sử dụng document.write(). Đặt <p> vào HTML của bạn và đặt cho nó một id. Sau đó chỉ cần thiết lập các innerHTML của nguyên tố này trực tiếp:

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

Answer 2

Hoặc, nếu bạn đã sử dụng jquery, bạn có thể sử dụng .resize(handler) để nắm bắt sự kiện thay đổi kích thước và .resize() mà không cần bất kỳ thông số để kích hoạt sự kiện ban đầu khi cửa sổ được tải xong.

Như thế này:

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

Demo in Fiddle

Answer 3

Tôi thích giải pháp gilly3, nhưng nó sẽ là hữu ích để có mã đầy đủ

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