How to Capture Browser Window Resize Event in JavaScript
Topic: JavaScript / jQueryPrev|Next
Answer: Use the addEventListener() Method
You can simply use the addEventListener() method to register an event handler to listen for the browser window resize event, such as window.addEventListener('resize', ...).
The following example will display the current width and height of the browser window on resize.
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Window Resize Event</title>
</head>
<body>
<div id="result"></div>
<script>
// Defining event listener function
function displayWindowSize(){
// Get width and height of the window excluding scrollbars
var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;
// Display result inside a div element
document.getElementById("result").innerHTML = "Width: " + w + ", " + "Height: " + h;
}
// Attaching the event listener function to window's resize event
window.addEventListener("resize", displayWindowSize);
// Calling the function for the first time
displayWindowSize();
</script>
<p><strong>Note:</strong> Please resize the browser window to see how it works.</p>
</body>
</html>You should avoid using the solution like window.onresize = function(event) { ... };, since it overrides the window.onresize event handler function. You should better assign a new event handler to the resize event using event listener, as shown in the example above.
Please check out the tutorial on JavaScript event listeners to learn more about it.
Related FAQ
Here are some more FAQ related to this topic:
