Include HTML From External File – alt-iframe

Category: Javascript | October 4, 2021
0 Comment
Demo Download
Author:FrontEndNeo
Views Total:2,796 views
Official Page:Go to website
Last Update:October 4, 2021
License:MIT

Preview:

Include HTML From External File – alt-iframe

Description:

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.

See Also:

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>

Changelog:

v1.9.2 (10/04/2021)

  • minor enhancement to src path

v1.9.1 (06/19/2021)

  • Added async Form Submit support

v1.9.0 (06/19/2021)

  • fix component’s elements’ (img) src path reference issue

v1.8.2 (04/26/2021)

  • minor fix

v1.8.0/1 (04/25/2021)

  • auto adjust child component path
  • auto adjust script, img, link:css src path within the component

v1.7.0 (04/20/2021)

  • fix: inline script with html tags

v1.6.1 (04/15/2021)

  • fix: inline script with html tags

v1.6.0 (04/14/2021)

  • Added more API methods

v1.5.0 (04/10/2021)

  • prevent default form submit

v1.4.4 (04/02/2021)

  • fix for scripts in HTML

v1.4.4 (03/31/2021)

  • support for async DOM updates using MutationObserver

v1.4.3 (03/28/2021)

  • support for async DOM updates

v1.4.1 (03/27/2021)

  • support <template> for ie11

v1.4.0 (03/25/2021)

  • JS Updated

v1.3.0 (03/17/2021)

  • JS Updated

v1.2.0 (03/10/2021)

  • <body components-loc="components" components-ext=".html"> to prefix and suffix the external src path
  • auto include script using +suffix in src url

See Also:

You Might Be Interested In:

Leave a Reply