How to make a modular website without using php?

Question

Using php, for example, would be adding this into index.php:

<?php include("footer.php"); ?>

And in adding the html code in footer.php.

But is it possible do the same only with html without using php or iframes?

There are tons of ways to do it in Javascript. Possibly server-side includes. Possibly Web Components. There's no clear answer here. — deceze, Feb 13 '15 at 12:57

score 0 · Accepted Answer · answered Feb 13 '15 at 13:09

0

I think that in pure html, the only way is using iframe, sorry!

answered Feb 13 '15 at 13:09

Thomas Rbt

1,483
1
13
26

1

But you can put all the html you want in footer.php (without php inside!) and include it, it works, but you need the .PHP – Thomas Rbt Feb 13 '15 at 13:21

score 0 · Answer 2 · answered Oct 04 '17 at 23:05

You could try to use localStorage : https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

The Web Storage API provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies.

an example of the idea (obviously SO doesn't allow this in snippets it can be tested/copied from here https://codepen.io/gc-nomade/pen/oGorNw )

window.onload = function() {
  var loaded = localStorage.getItem("header");
  if (loaded) {// if already set, load it from visitor 
    var header = localStorage.getItem("header");
    var aside = localStorage.getItem("aside");
    var footer = localStorage.getItem("footer");
    document.getElementById("headers").innerHTML = header;
    document.getElementById("aside").innerHTML = aside;
    document.getElementById("footer").innerHTML = footer;
  } else {// if first visit, load and store basic content once
    var top = "<h1>hello</h1>";
    var side = '<ul><li><a href="#">link</a>';
    var bottom = "<p>My footer loaded via local storage </p>";
    localStorage.setItem("header", top);
    localStorage.setItem("aside", side);
    localStorage.setItem("footer", bottom);
  }
};

body {
  margin: 0;
  display: flex;
  flex-flow: column;
  height: 100vh;
  background: crimson;
}

main {
  flex: 1;
  display: flex;
  box-shadow: 2px;
}

aside {
  width: 200px;
  border: solid 2px;
  background: tomato;
}

footer,
header {
  background: lightblue;
  box-shadow: 0 0 0 2px;
  text-align: center;
}

aside img {
  max-width: 50%;
  display: block;
  margin: 5vh auto;
}

<header id="headers"></header>
<main>
  <aside id="aside"></aside>
  <section> page content</section>
</main>
<footer id="footer"></footer>

How to make a modular website without using php?

2 Answers2