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

jQueryWeb DevelopmentFront End Technology

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>
raja
Kristi Castro
Published on 31-Jul-2018 13:22:55
Previous Page Print Page
Next Page  
Advertisements