Adjust Height of iFrame Based on 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: 2020-06-20T07:25:20+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements