Gå til innhold
🎄🎅❄️God Jul og Godt Nyttår fra alle oss i Diskusjon.no ×

inkluder HTML

sfanett

Av sfanett
i Programmering og webutvikling

Anbefalte innlegg

Videoannonse

Videoannonse
Annonse
Dan-Levi

Dan-Levi

Skrevet
Skrevet (endret)

Hei, dette kan du gjøre uten PHP, men ikke i ren HTML.

Her er en metode du kan bruke for å inkludere HTML uten server side kode, med JavaScript.

Filstruktur:

  • index.html
  • 1.html
  • 2.html
  • 3.html

 

index.html: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul>
    <li><a href="#" class="content-link" data-href="1.html">1</a></li>
    <li><a href="#" class="content-link" data-href="2.html">2</a></li>
    <li><a href="#" class="content-link" data-href="3.html">3</a></li>
  </ul>
  <div id="content"></div>


  <script>

    const contentLink = document.querySelectorAll(".content-link")
    const contentElem = document.getElementById("content")


    contentLink.forEach(link => {
      link.addEventListener("click", event => 
      {
        event.preventDefault();
        requestFile(link.dataset.href)
      })
    })


const requestFile = theFile =>
{
  const oReq = new XMLHttpRequest()
  oReq.addEventListener("load", handleRequest)
  oReq.open("GET", theFile)
  oReq.send()
}

const handleRequest = body => 
{
  contentElem.innerHTML = body.target.response
}

  </script>
</body>
</html>

 

Endret av Dan-Levi
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...