Render an HTML File Into a Container

Imported Answer

Render an HTML File Into a Container

A JavaScript integration answer focused on using iframes and srcdoc instead of unnecessary AJAX for complete HTML content.

Problem and Solution

This page carries the full answer

Problem: A page needed to display complete HTML documents inside dedicated containers without adding the wrong transport layer or a lot of extra complexity.

Original question: Can you render a html file into a container? by JoshuaLC.

Full imported answer

iFrame supports using whole files (and sites) to display your content
No need for AJAX nor unnecessary extra complications!

HTML

<div class="container container1"></div>
<div class="container container2"></div> <!-- Corrected your class name typo -->

CSS

.container1 {
    width: 720px;
    height: 1280px;
    border: 1px red solid; /* Using for sample purposes */
}

.container2 {
    width: 1080px;
    height: 1920px;
    border: 1px green solid; /* Using for sample purposes */
}

JavaScript

This code does not require AJAX and it is optional. You can simply hardcode the source of each iframe directly in your page. SIMPLE!

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.container').forEach(div => {
    iframe = document.createElement('iframe');
        if (div.classList.contains('container1')) {
            // iframe.src = "https://example.com/content1.html"; // Replace url for your file url & uncomment this line
            iframe.srcdoc =  "<html><body>Hello, <b>container #1</b>.</body></html>"; // Using srcdoc for sample purposes.
        } else if (div.classList.contains('container2')) {
            // iframe.src = "https://example.com/content2.html"; // Replace url for your file url & uncomment this line
            iframe.srcdoc =  "<html><body>Hello, <b>container #2</b>.</body></html>"; // Using srcdoc for sample purposes.
        } else {
            iframe.srcdoc =  "<html><body><b>Whools!</b>, something went wrong. Quickly! Beam me up StackOverflow!</body></html>"; // Using srcdoc for sample purposes.
        }
    div.appendChild(iframe);
    }); // Containers: End
}); // Loaded: End

You do not have to use JavaScript, and hard code the page in the iframe source. But know it is an option and you already have the code to modify it as needed 😉

Please do make sure to remove the line with iframe.srcdoc , use iframe.src = instead, to point to your html file' url and uncomment (remove // in // iframe.src).. Alternately you can use srcdoc to send a hardcoded HTML.

Here is a JSFiddle: https://jsfiddle.net/5pht24gc/

Running Demo

Working code in-house

This demo is embedded here so the page carries the working result, not just a link away from the portfolio.

Source and Credit

Also posted on Stack Overflow

This page keeps the full solution in-house, while still pointing back to the original Stack Overflow post for proof and attribution.

Original answer: Stack Overflow answer #78791368 by Omar Juvera.

License note: this answer was originally published on Stack Overflow under CC BY-SA 4.0. Keeping a small source note here is the cleanest way to preserve attribution while the portfolio page remains the main destination.