How to adjust width and height of iframe to fit with content in it

0 votes

I need a solution for auto-adjusting the width and height of an iframe to barely fit its content. The point is that the width and height can be changed after the iframe has been loaded. I guess I need an event action to deal with the change in dimensions of the body contained in the iframe.

Sep 4, 2020 in Java-Script by kartik
• 37,490 points
1,773 views

1 answer to this question.

0 votes

Hello @kartik,

<script type="application/javascript">

function resizeIFrameToFitContent( iFrame ) {

    iFrame.width  = iFrame.contentWindow.document.body.scrollWidth;
    iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}

window.addEventListener('DOMContentLoaded', function(e) {

    var iFrame = document.getElementById( 'iFrame1' );
    resizeIFrameToFitContent( iFrame );

    // or, to resize all iframes:
    var iframes = document.querySelectorAll("iframe");
    for( var i = 0; i < iframes.length; i++) {
        resizeIFrameToFitContent( iframes[i] );
    }
} );

</script>

<iframe src="usagelogs/default.aspx" id="iFrame1"></iframe>

Hope it helps!!
Thank you!!

answered Sep 4, 2020 by Niroj
• 82,580 points

Related Questions In Java-Script

+1 vote
1 answer

How to implement up and down voting of a particular thread?

Hello @kartik, Yes, JavaScript is involved. There are ...READ MORE

answered Jun 2, 2020 in Java-Script by Niroj
• 82,580 points
115 views
0 votes
1 answer

How to Store PHP variable with HTML in JavaScript in Laravel Blade Template?

Hello @kartik, The double curly brackets {{ }} will always ...READ MORE

answered Jun 11, 2020 in Java-Script by Niroj
• 82,580 points
5,972 views
0 votes
1 answer

How to retrieve config and env variable in vue component?

Hello @kartik, To access your env variables in ...READ MORE

answered Jun 11, 2020 in Java-Script by Niroj
• 82,580 points
4,474 views
0 votes
1 answer

How to send data in request body with a GET when using jQuery $.ajax()?

Hello @kartik, Sending the data in your scenario,I ...READ MORE

answered Jun 18, 2020 in Java-Script by Niroj
• 82,580 points
7,147 views
+1 vote
1 answer

How to make anchor tag with routing using Laravel?

Hey @kartik, First you have to go to ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,580 points
5,666 views
0 votes
1 answer

What is redirection in Laravel?

Named route is used to give specific ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,580 points
658 views
0 votes
1 answer

How to install Laravel via composer?

Hello, This is simple you just need to ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,580 points
501 views
+1 vote
1 answer

What are named routes in Laravel and How can specify route names for controller actions?

Hey @kartik, Named routing is another amazing feature of ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,580 points
6,240 views
+1 vote
2 answers

How to convert entire div data into image and save it into directory without using canvas?

Hello @kartik, You can try the sample code ...READ MORE

answered Apr 29, 2020 in Java-Script by Niroj
• 82,580 points
18,178 views
0 votes
1 answer

How to use Redirect in the new react-router-dom of Reactjs?

Hello, To navigate to another component you can ...READ MORE

answered May 18, 2020 in Java-Script by Niroj
• 82,580 points
4,763 views