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.

  • <!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:

Your Feedback:

We would love to hear from you, please drop us a line.