How to adjust the height of iframe based on the loaded content using jQuery?


To adjust the height of iframe, use the jQuery height() method. You can try to run the following code to adjust height of iframe dynamically on button click:

Example

Live Demo

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
        $("button").click(function(){
          $("iframe").height(300);
        });
      });
    </script>
   </head>
<body>
  <iframe src="https://www.qries.com" style="height:150px;width:400px;border:2px solid gray;background-color:lightblue;"></iframe><br>
  <button>Change Height</button>
</body>
</html>

Updated on: 20-Jun-2020

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements