Search code examples
javascripthtmlcssiframe

Have <iframe> merge with parent body, using only 1 scrollbar for whole page, always adjusting for height

I'm trying to do something that shouldn't be very hard, but surprisingly I haven't been able to find the solution online.

I want to embed iframes to any random website, without the visitors noticing that it's actually a different frame. I want the iframe to merge with the parent body, extending the body of the parent, so that the non-iframe-part and the iframe-part of the website can be scrolled only using the main scrollbar of the parent page.

This is my code so far:

<h1>Tours</h1>

<div style="background-color: red; color: white; padding: 200px; text-align: center;">
    Top part of page
</div>

<iframe id="tourtask-iframe" style="overflow: hidden;" src="/public/index.php?b=eit&token=abcd1234&p=tours&lang=en">Please upgrade to a browser that supports iframes.</iframe>

<style>
body, html {
    width: 100%;
    height: 100%;
    margin: 0;
}

#tourtask-iframe {
    width: 100%;
    height: 2000px;
    border: none;
}
</style>

When I do a overflow: hidden; on the body of the source file of the iframe archive, the scrollbar disappears, but I'm unable to scroll the iframe portion of the page.

I'd need to update the height of the iframe element to fill up the 100% of the height of this file. I'd also need to update the height of the iframe element whenever I expand/collapse any collapsible content in the frame.

How can this be done? Or is there a better way?

I'd preferably not use any library/framework for the parent page, since I'll need to be able to embed this iframe to totally different webpages.

Thank you!

Solution

  • I found an amazing script for this called iFrame Resizer: https://iframe-resizer.com/

    It feels any change in height of iframe source document and updates the iframe container accordingly. It took some tweaking and investigation to get it to work.

    Please make sure you're complying with following requirements:

    1. The source iframe document must start with <!DOCTYPE html>.
    2. Make sure the body of the iframe document is not 100% (which it is by default when using Material Design for example).

    To successfully embed the correctly resizing iframe to the parent document, I'm now using the following code:

    <iframe id="tourTaskIframe" scrolling="no" src="/public/index.php?b=eit&token=abcd1234&p=tours&lang=en">Please upgrade to a browser that supports iframes.</iframe>
<script type="text/javascript" src="/public/js/iframeResizer.min.js"></script>
<script type="text/javascript" src="/public/js/iframeConfig.js"></script>
<link rel="stylesheet" type="text/css" href="/public/css/iframe-parent.css">

    iframeConfig.js:

    iFrameResize({
    heightCalculationMethod : 'bodyOffset'
}, '#tourTaskIframe');

    iframe-parent.css:

    iframe{
    width: 1px;
    min-width: 100%;
    border: none;
}

body {
    margin: 0;
}

    In the styles.css for the iframe source document, in addition to any other styles I'm using for aesthetics, I have the following essential lines:

    body {
    height: auto !important; /* Essential for resizing */
    min-height: 0 !important; /* Essential for resizing */  
}

    And that's it!