Include HTML From External File – alt-iframe

Category: Javascript | July 22, 2020
Views Total:133 views
Official Page:Go to website
Last Update:July 22, 2020


Include HTML From External File – alt-iframe


The fastest way of including an external file on the page is to use the <iframe /> element.

An iframe element is used to embed another document within the current HTML document.

Yet it is not the best practice since iframes may cause SEO, Usability, and even security issues on modern web app.

alt-iframe is a JavaScript alternative to the <iframe /> that makes it simple to include partial HTML inside a given container within the document.

Based on AJAX (XMLHttpRequest Object) and works without third-party frameworks like jQuery.

How to use it:

1. Include the alt-iframe library on the page.

<script src="./dist/es5/alt-iframe.min.js"></script>

2. Use src attribute to load a partial HTML inside the tag.

<header src="external.html"></header>

3. Use id attribute to load partial html on click.

<main src="external.html" id="containerMain"></main>

4. Use replace attribute to replace the tag with partial html content.

<div src="external.html" replace></div>

You Might Be Interested In:

Leave a Reply