Resize iframes with screen size

Debjyoti Sutradhar 0
Viewed 30

I am trying to add only the top functionality block(top brownish coloured block) in - https://opendsa-server.cs.vt.edu/OpenDSA/Books/Everything/html/Write.html#recurWriteStepsCON in my web page

But the problem is when I am opening in a smaller screen device the iframe is not adjusting and the content inside the iframe is getting cuttoff. How do I adjust the iframe? I am using

<iframe src="https://opendsa-server.cs.vt.edu/OpenDSA/Books/Everything/html/Write.html#recurWriteStepsCON" width="100%" height="330px" scrolling="no" style="border:0;"></iframe>
iframe javascript css html
1 Answers

You can get the width and height of the window of the iframe, you can use

document.body.scrollWidth
document.body.scrollHeight

Full example of code.

HTML

<iframe src="https://opendsa-server.cs.vt.edu/OpenDSA/Books/Everything/html/Write.html#recurWriteStepsCON" width="100%" height="330px" scrolling="no" style="border:0;"></iframe>

JS

function resizeIFrameToFitContent(iFrame) {
    iFrame.width  = document.body.scrollWidth;
    iFrame.height = document.body.scrollHeight;
}

window.addEventListener('DOMContentLoaded', function(e) {
    var iFrame = document.querySelector( 'iframe' );
    resizeIFrameToFitContent( iFrame );
} );
userYBSN0
Related