JS in HTML einbinden

Justman10000 · 27. August 2021

Hey, habe die Datei header.js (die HTML Code beinhaltet, siehe Post) in einem HTML Dokument eingeführt! Nun will ich jedoch if und else verwenden, müsste dafür jedoch die ganze Kette clonen (was nicht gerade weinig ist)! Habe es schon folgend versucht:

HTML:

<body>
    <?php
    include('header.php')
    ?>
</body>

Funktioniert jedoch nicht!

Javascript:

const document = require('./header.html')

document.write();

Reagiert nicht!

Javascript:

document.write('./header.html');

Reagiert genauso nicht!

PHP:

<body>
    <?php
    include('header.php')
    ?>
</body>

Würde funktionieren, nur würde ich gerne PHP vermeiden!

Noch andere Pläne 😂?

madmax2010 · 27. August 2021

du kannst js auch einfach in script tags packen

Edit:
ups.. du meisnt extern (in deinem linkt fehlt ein forum/)

dann bspw so:
<script src="myscripts.js"></script>

Justman10000 · 27. August 2021

madmax2010 schrieb:
du kannst js auch einfach in script tags packen
Edit:
ups.. du meisnt extern (in deinem linkt fehlt ein forum/)

dann bspw so:
<script src="myscripts.js"></script>

Ja, den Tag hatte ich ja schon, es geht darum, dass ich eine HTML über eine Javascript in eine andere HTML einbinden will... Sprich:

header.html -> header.js -> index.html

bananajoe2k4 · 27. August 2021

Javascript:

    fetch("./header.html")
      .then(response => {
        return response.text()
      })
      .then(data => {
        document.querySelector("body").innerHTML = data;
      });

umask007 · 27. August 2021

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
mittels iframe?

Justman10000 · 27. August 2021

bananajoe2k4 schrieb:

Javascript:

    fetch("./header.html")
      .then(response => {
        return response.text()
      })
      .then(data => {
        document.querySelector("body").innerHTML = data;
      });

bananajoe2k4 · 27. August 2021

Das ganze muss über nen http-Server ausgeliefert werden damit das funktionniert. Einfach aufm Desktop ausführen ist nicht...

madmax2010 · 27. August 2021

bananajoe2k4 schrieb:
Das ganze muss über nen http-Server ausgeliefert werden damit das funktionniert.

habs gerade nur fix ueberfloggen, aber das sollte dafuer ausreichend sein: https://geekflare.com/nginx-static-files-node-js/, das sollte aber auch lokal tun. Sehe keinen Grund, warum das in dem Kontext via http ausgeliefert werden muss

bananajoe2k4 · 27. August 2021

madmax2010 schrieb:
habs gerade nur fix ueberfloggen, aber das sollte dafuer ausreichend sein: https://geekflare.com/nginx-static-files-node-js/

Höh? Was zur Hölle hat NodeJS damit zu tun? Hier geht es um statisches HTML?!

Justman10000 · 27. August 2021

bananajoe2k4 schrieb:
Höh? Was zur Hölle hat NodeJS damit zu tun? Hier geht es um statisches HTML?!

Ach ja, es ist via Apache2 auf einem vServer

bananajoe2k4 · 27. August 2021

Funktionnierts noch nicht? Ich habs vorhin mal ausprobiert und es klappt ohne Probleme.

madmax2010 · 27. August 2021

bananajoe2k4 schrieb:
Höh? Was zur Hölle hat NodeJS damit zu tun? Hier geht es um statisches HTML?!

der nginx teil ist der relevante, nicht der node teil.

ob man da nun inhalte mit node oder sonst was abgreift ist nicht wirklich relevant

Justman10000 · 27. August 2021

bananajoe2k4 schrieb:
Funktionnierts noch nicht? Ich habs vorhin mal ausprobiert und es klappt ohne Probleme.

Zeige mal ein volles HTML und Javascript Beispiel

bananajoe2k4 · 27. August 2021

Justman10000 schrieb:
Zeige mal ein volles HTML und Jasavscript Beispiel

Aber nur wenn du sagst du dein Fehler lag ;-)

test.html

HTML:

<html>
<head>
<script src="j.js"></script>
</head>
<body>
bla
</body>

j.js

Javascript:

fetch("./header.html")
  .then(response => {
    return response.text()
  })
  .then(data => {
    document.querySelector("body").innerHTML = data;
  });

header.html

HTML:

<a href="https://computerbase.de">CB</a>

umask007 · 27. August 2021

HTML:

<body>
   <iframe   src="header.html">
   </iframe>
</body>

hier noch das iframe Beispiel

Justman10000 · 28. August 2021

bananajoe2k4 schrieb:
Aber nur wenn du sagst du dein Fehler lag ;-)

test.html

HTML:

<html> <head> <script src="j.js"></script> </head> <body> bla </body>

j.js

Javascript:

fetch("./header.html") .then(response => { return response.text() }) .then(data => { document.querySelector("body").innerHTML = data; });

header.html

HTML:

<a href="https://computerbase.de">CB</a>

Nope! Funktioniert immer noch nicht!

bananajoe2k4 · 28. August 2021

Was genau funktionniert denn nicht? Gibt es irgendwelche Fehlermeldungen? Schon mal die Developer-Konsole deines Browsers bemüht?

Justman10000 · 28. August 2021

bananajoe2k4 schrieb:
Was genau funktionniert denn nicht? Gibt es irgendwelche Fehlermeldungen? Schon mal die Developer-Konsole deines Browsers bemüht?

Das is´ ´s ja! Die gibt nichts aus 😂!

bananajoe2k4 · 28. August 2021

Nur damit wir auf der sicheren Seite sind: wenn du die test.html aufrufst, dann sollte da zunächst "bla" drinstehen. Innerhalb eines Bruchteils einer Sekunde sollte dann daraus ein Link auf CB werden, da der Inhalt von header.html reingeladen wird. Was passiert bei dir?

LencoX2 · 28. August 2021

Bitte Anforderung genauer formulieren.
Ist die zu ladende HTML eine per URL aufrufbare Seite? Falls nicht wo liegt sie? Wie wird sie geladen?
Davon abhängig kann ich die eine technische Lösung nennen

JS in HTML einbinden

Cadet 3rd Year

Fleet Admiral

Cadet 3rd Year

Lt. Junior Grade Pro

Lt. Junior Grade

Cadet 3rd Year

Lt. Junior Grade Pro

Fleet Admiral

Lt. Junior Grade Pro

Cadet 3rd Year

Lt. Junior Grade Pro

Fleet Admiral

Cadet 3rd Year

Lt. Junior Grade Pro

Lt. Junior Grade

Cadet 3rd Year

Lt. Junior Grade Pro

Cadet 3rd Year

Lt. Junior Grade Pro

Commander

Ähnliche Themen