Skip to content
Related Articles

Related Articles

Resize an iframe based on the content
  • Last Updated : 10 Jun, 2019

The iframe HTML element is often used to insert contents from another source. Contents which needs resizing is done indirectly using a div tag. The trick is to initiate with a div tag and enclose within an iframe tag. Now provide iframe with CSS.
Note: To open the source site to resize its contents, the source site must be listed in the same directory.

Example 1: Below is the implementation of HTML code to resize contents using Internal CSS:-




<html>
  
<head>
    <style>
        body {
            background-color: LIGHTGREY;
        }
          
        #target {
            width: 300px;
            height: 200px;
            overflow-y: auto;
            overflow-x: auto;
            resize: both;
            position: relative;
            z-index: 2;
        }
          
        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
  
</head>
  
<body>
    <div id="target">
        <iframe src="/tryit.php"></iframe>
    </div>
</body>
  
</html>

Output:

Here we have used an internal style sheet to fix the dimension of displaying area as width and height in pixels under target. CSS overflow property controls the contents that are too big to fit into an area.

Example 2: Below is the implementation of HTML code to resize contents, using Javascript:-
We will use JavaScript contentWindow property that will iFrame automatically adjust its height according to the contents, no scrollbars will appear.

  • We select iframe within script tag:
    var iframe = document.getElementById(“myIframe”);
  • We Adjust iframe height onload event by:
    iframe.onload = function(){}




<html>
  
<head>
    <style>
        div {
            width: 50%;
        }
    </style>
</head>
  
<body>
    <iframe src="/tryit.php" id="target">
    </iframe>
    <script>
        var div = document.getElementById("target");
        div.onload = function() {
            div.style.height =
              div.contentWindow.document.body.scrollHeight + 'px';
        }
    </script>
</body>
  
</html>

Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :