How do you load an html file?

Learn how to include HTML snippets in HTML.

The HTML

Save the HTML you want to include in an .html file:

content.html

Google Maps

Animated Buttons

Modal Boxes

Animations

Progress Bars

Hover Dropdowns

Click Dropdowns

Responsive Tables

Include the HTML

Including HTML is done by using a w3-include-html attribute:

Example

Add the JavaScript

HTML includes are done by JavaScript.

Example

function includeHTML[] {
  var z, i, elmnt, file, xhttp;
  /* Loop through a collection of all HTML elements: */
  z = document.getElementsByTagName["*"];
  for [i = 0; i < z.length; i++] {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute["w3-include-html"];
    if [file] {
      /* Make an HTTP request using the attribute value as the file name: */
      xhttp = new XMLHttpRequest[];
      xhttp.onreadystatechange = function[] {
        if [this.readyState == 4] {
          if [this.status == 200] {elmnt.innerHTML = this.responseText;}
          if [this.status == 404] {elmnt.innerHTML = "Page not found.";}
          /* Remove the attribute, and call this function once more: */
          elmnt.removeAttribute["w3-include-html"];
          includeHTML[];
        }
      }
      xhttp.open["GET", file, true];
      xhttp.send[];
      /* Exit the function: */
      return;
    }
  }
}

Call includeHTML[] at the bottom of the page:

Include Many HTML Snippets

You can include any number of HTML snippets:

Example

Try it Yourself »

w3.js is pretty cool.

//www.w3schools.com/lib/w3.js

and we are focus

w3-include-html

but consider the below case

- 🧾 popup.html
- 🧾 popup.js
- 🧾 include.js
- 📂 partials 
   - 📂 head
         - 🧾 bootstrap-css.html
         - 🧾 fontawesome-css.html
         - 🧾 all-css.html
   - 🧾 hello-world.html

Hello World

Script

// include.js

const INCLUDE_TAG_NAME = `data-include-html`

/**
 * @param {Element} node
 * @param {Function} cb callback
 * */
export async function includeHTML[node, {
  cb = undefined
}] {
  const nodeArray = node === undefined ?
    document.querySelectorAll[`[${INCLUDE_TAG_NAME}]`] :
    node.querySelectorAll[`[${INCLUDE_TAG_NAME}]`]

  if [nodeArray === null] {
    return
  }

  for [const node of nodeArray] {
    const filePath = node.getAttribute[`${INCLUDE_TAG_NAME}`]
    if [filePath === undefined] {
      return
    }

    await new Promise[resolve => {
      fetch[filePath
      ].then[async response => {
          const text = await response.text[]
          if [!response.ok] {
            throw Error[`${response.statusText} [${response.status}] | ${text} `]
          }
          node.innerHTML = text
          const rootPath = filePath.split["/"].slice[0, -1]
          node.querySelectorAll[`[${INCLUDE_TAG_NAME}]`].forEach[elem=>{
            const relativePath = elem.getAttribute[`${INCLUDE_TAG_NAME}`] // not support ".."
            if[relativePath.startsWith['/']] { // begin with site root.
              return
            }
            elem.setAttribute[`${INCLUDE_TAG_NAME}`, [...rootPath, relativePath].join["/"]]
          }]
          node.removeAttribute[`${INCLUDE_TAG_NAME}`]
          await includeHTML[node, {cb}]
          node.replaceWith[...node.childNodes] // //stackoverflow.com/a/45657273/9935654
          resolve[]
        }
      ].catch[err => {
        node.innerHTML = `${err.message}`
        resolve[]
      }]
    }]
  }

  if [cb] {
    cb[]
  }
}

// popup.js

import * as include from "include.js"

window.onload = async [] => {
  await include.includeHTML[undefined, {}]
  // ...
}

output

Hello World

How do I load an HTML file in Chrome?

What is a HTML file and how do I open it?

How do I import an HTML file into my website?

How do I open an HTML file on a PC?