Erstellen Sie Kopf- und Fußzeilendateien, die in mehrere HTML-Seiten aufgenommen werden sollen

140

Ich möchte gemeinsame Kopf- und Fußzeilenseiten erstellen, die auf mehreren HTML-Seiten enthalten sind.

Ich möchte Javascript verwenden. Gibt es eine Möglichkeit, dies nur mit HTML und JavaScript zu tun?

Ich möchte eine Kopf- und Fußzeilenseite in eine andere HTML-Seite laden.

javascript jquery html css Prasanth AR
quelle
1
Sie suchen nach Ajax ... $ ('. MyElement) .load (' urltopage.html '); Dadurch wird der Inhalt von urltopage.html in .myElement
Salketer
stackoverflow.com/a/8592403/896341
Stefan

Antworten:

192

Sie können dies mit jquery erreichen .

Geben Sie diesen Code ein index.html

<html>
<head>
<title></title>
<script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous">
</script>
<script> 
$(function(){
  $("#header").load("header.html"); 
  $("#footer").load("footer.html"); 
});
</script> 
</head>
<body>
<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
</body>
</html>

und geben Sie diesen Code in header.htmlund footer.htmlan derselben Stelle wie einindex.html

<a href="http://www.google.com">click here for google</a>

Wenn Sie jetzt besuchen index.html, sollten Sie in der Lage sein, auf die Link-Tags zu klicken.

Hariprasad Prolanx
quelle
Ja. Alle Seiten sollten diese Seitenstruktur haben
Hariprasad Prolanx
19
Laden oder andere Funktionen, die importieren oder verwenden, local filefunktionieren in einer neuen Version von Google Chrome oder IE nicht. Grund: Sicherheit!
Sinac
7
Manchmal frage ich mich, wie Menschen ohne jQuery überhaupt atmen können. Oder gibt es ein .breathe(in)und .breathe(out)schon? Jede Skriptsprache ist hier ein reiner Overkill.
Die Verschwörung
6
Ich Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
bekomme
1
Es ist erforderlich, den Code auf dem Server auszuführen. Was bedeutet, dass die URL "http: // ....." sein muss.
Patriotisch
37

Ich füge allgemeine Teile als Kopf- und Fußzeile mithilfe von Server Side Includes hinzu . Es wird kein HTML und kein JavaScript benötigt. Stattdessen fügt der Webserver den enthaltenen Code automatisch hinzu, bevor Sie etwas anderes tun.

Fügen Sie einfach die folgende Zeile hinzu, in die Sie Ihre Datei aufnehmen möchten:

<!--#include file="include_head.html" -->
die Verschwörung
quelle
6
Ich mag diese altmodische Art. Tatsächlich scheint es nicht viele Vorteile zu haben, ein Skript zu verwenden, um eine so einfache Aktion auszuführen.
Jenna Leaf
3
Das Einschließen von Dateien mithilfe eines Skripts hat große Nachteile: Es beeinträchtigt die Leistung, da der Client die Hauptseite herunterladen, das DOM laden, das Skript ausführen und erst dann die enthaltenen Dateien herunterladen kann, für die eine zusätzliche Serveranforderung pro enthaltener Datei erforderlich ist . Das Einschließen von Dateien mit Server Side Includes dient allen Elementen während der ersten Serveranforderung. Es ist keine Clientaktion erforderlich.
Die Verschwörung
SSI erfordert mit der Dateierweiterung: .shtml, .stm, .shtm. Es funktioniert in Apache, LiteSpeed, Nginx, LightTPD und IIS.
Ubershmekel
@ubershmekel Wie Sie sagten, unterstützen die relevanten Webserver SSI. Die Dateierweiterung ist nicht darauf beschränkt .shtml, .stmund .shtm: Auf IIS, alle analysierten Dateien können SSI enthalten, zum Beispiel .aspx. Wenn Sie mit PHP arbeiten, müssen Sie stattdessen PHP includeoder den virtualBefehl verwenden, um das gleiche Ergebnis zu erzielen.
Die Verschwörung
32

Müssen Sie die HTML-Dateistruktur mit JavaScript verwenden? Haben Sie darüber nachgedacht, stattdessen PHP zu verwenden, damit Sie ein einfaches PHP-Include-Objekt verwenden können?

Wenn Sie die Dateinamen Ihrer HTML-Seiten in .php konvertieren, können Sie oben auf jeder Ihrer .php-Seiten eine Codezeile verwenden, um den Inhalt aus Ihrer header.php einzuschließen 

<?php include('header.php'); ?>

Machen Sie dasselbe in der Fußzeile jeder Seite, um den Inhalt aus Ihrer Datei footer.php aufzunehmen

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

Kein JavaScript / Jquery oder zusätzliche enthaltene Dateien erforderlich.

NB Sie können Ihre .html-Dateien auch in .php-Dateien konvertieren, indem Sie Folgendes in Ihrer .htaccess-Datei verwenden

# re-write html to php
RewriteRule ^(.*)\.html$ $1.php [L]
RewriteRule ^(.+)/$ http://%{HTTP_HOST}/$1 [R=301,L]


# re-write no extension to .php
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.php [NC,L]
Sol
quelle
2
@ Justin808 - Das OP erwähnt nichts über eine lokal gehostete Installation, daher nahm ich an, dass er über serverbasierte Dateien sprach.
Sol
1
@Sol Das OP hat jedoch ausdrücklich erwähnt, dass Javascript verwendet werden soll, sodass Ihre Antwort nicht zum Thema gehört. Bei der Full-Stack-Webentwicklung wird PHP schnell nicht mehr verwendet. Node.js bietet alle entsprechenden Funktionen und erfordert nur die Verwendung von Javascript. TL; DR Bitte beantworten Sie die gestellten Fragen. Das OP wollte eine JS-Lösung, daher ist es unangemessen, ihm eine Lösung für PHP, Ruby, Python, C ++ oder eine andere Sprache zu geben.
Zach
9

Ich habe Folgendes versucht: Erstellen Sie eine Datei header.html wie

<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- JS -->
<script type="text/javascript" src="js/lib/jquery-1.11.1.min.js" ></script>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular-resource.min.js"></script>
<script type="text/javascript" src="js/lib/angular-route.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">

<title>Your application</title>

Fügen Sie nun header.html wie folgt in Ihre HTML-Seiten ein:

<head>
   <script type="text/javascript" src="js/lib/jquery-1.11.1.min.js" ></script>
   <script> 
     $(function(){ $("head").load("header.html") });
   </script>
</head>

Funktioniert einwandfrei.

Asheesh Gupta
quelle
1
Gute Lösung, aber ich denke, dies würde das jquery-Framework zweimal laden, einmal beim ersten Laden der Seite und zweitens, wenn die .load () -Methode ausgeführt wird - da die Zielseite auch jquery enthält.
Delali
8

Sie könnten auch setzen: (load_essentials.js :)

document.getElementById("myHead").innerHTML =
	"<span id='headerText'>Title</span>"
	+ "<span id='headerSubtext'>Subtitle</span>";
document.getElementById("myNav").innerHTML =
	"<ul id='navLinks'>"
	+ "<li><a href='index.html'>Home</a></li>"
	+ "<li><a href='about.html'>About</a>"
	+ "<li><a href='donate.html'>Donate</a></li>"
	+ "</ul>";
document.getElementById("myFooter").innerHTML =
	"<p id='copyright'>Copyright &copy; " + new Date().getFullYear() + " You. All"
	+ " rights reserved.</p>"
	+ "<p id='credits'>Layout by You</p>"
	+ "<p id='contact'><a href='mailto:[email protected]'>Contact Us</a> / "
	+ "<a href='mailto:[email protected]'>Report a problem.</a></p>";
<!--HTML-->
<header id="myHead"></header>
<nav id="myNav"></nav>
Content
<footer id="myFooter"></footer>

<script src="load_essentials.js"></script>
Erweitern Sie das Snippet

JustinM
quelle
6

Ich denke, die Antworten auf diese Frage sind zu alt ... Derzeit unterstützen einige Desktop- und mobile Browser HTML-Vorlagen, um dies zu tun.

Ich habe ein kleines Beispiel gebaut:

OK getestet in Chrome 61.0, Opera 48.0, Opera Neon 1.0, Android Browser 6.0, Chrome Mobile 61.0 und Adblocker Browser 54.0.
Getestet KO in Safari 10.1, Firefox 56.0, Edge 38.14 und IE 11

Weitere Informationen zur Kompatibilität finden Sie unter canisue.com

index.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Template Example</title>

    <link rel="stylesheet" href="styles.css">
    <link rel="import" href="autoload-template.html">
</head>
<body>

<div class="template-container">1</div>
<div class="template-container">2</div>
<div class="template-container">3</div>
<div class="template-container">4</div>
<div class="template-container">5</div>

</body>
</html>

autoload-template.html

<span id="template-content">
    Template Hello World!
</span>

<script>
    var me = document.currentScript.ownerDocument;
    var post = me.querySelector( '#template-content' );

    var container = document.querySelectorAll( '.template-container' );

    //alert( container.length );
    for(i=0; i<container.length ; i++) {
        container[i].appendChild( post.cloneNode( true ) );
    }
</script>

styles.css

#template-content {
    color: red;
}

.template-container {
    background-color: yellow;
    color: blue;
}

Weitere Beispiele finden Sie in diesem HTML5 Rocks-Beitrag

JavierFuentes
quelle
4
HTML-Importe sind jetzt veraltet.
Jonathan Sharman
5

Ich habe in C # / Razor gearbeitet und da ich auf meinem Heim-Laptop kein IIS-Setup habe, habe ich nach einer Javascript-Lösung gesucht, die in Ansichten geladen werden kann, während statische Markups für unser Projekt erstellt werden.

Ich bin auf eine Website gestoßen, auf der Methoden zum "Ditching Jquery" erklärt wurden. Sie zeigt, dass eine Methode auf der Website genau das tut, wonach Sie suchen, und zwar in einfachem Jane-Javascript ( Referenzlink am Ende des Beitrags ). Stellen Sie sicher, dass Sie alle Sicherheitslücken und Kompatibilitätsprobleme untersuchen, wenn Sie dies in der Produktion verwenden möchten. Ich bin es nicht, also habe ich mich selbst nie darum gekümmert.

JS-Funktion

var getURL = function (url, success, error) {
    if (!window.XMLHttpRequest) return;
    var request = new XMLHttpRequest();
    request.onreadystatechange = function () {
        if (request.readyState === 4) {
            if (request.status !== 200) {
                if (error && typeof error === 'function') {
                    error(request.responseText, request);
                }
                return;
            }
            if (success && typeof success === 'function') {
                success(request.responseText, request);
            }
        }
    };
    request.open('GET', url);
    request.send();
};

Holen Sie sich den Inhalt

getURL(
    '/views/header.html',
    function (data) {
        var el = document.createElement(el);
        el.innerHTML = data;
        var fetch = el.querySelector('#new-header');
        var embed = document.querySelector('#header');
        if (!fetch || !embed) return;
        embed.innerHTML = fetch.innerHTML;

    }
);

index.html

<!-- This element will be replaced with #new-header -->
<div id="header"></div>

Ansichten / header.html

<!-- This element will replace #header -->
<header id="new-header"></header>

Die Quelle ist nicht meine eigene, ich beziehe mich lediglich darauf, da es sich um eine gute Vanille-Javascript-Lösung für das OP handelt. Der Originalcode befindet sich hier: http://gomakethings.com/ditching-jquery#get-html-from-another-page

Darcher
quelle
Gute Lösung. Ich ziehe es vor, jquery zu verwenden.
Delali
2

Aloha von 2018. Leider habe ich nichts Cooles oder Futuristisches, das ich mit Ihnen teilen könnte.

Ich wollte jedoch diejenigen darauf hinweisen, die kommentiert haben, dass die jQuery- load()Methode derzeit nicht funktioniert, und wahrscheinlich versuchen, die Methode mit lokalen Dateien zu verwenden, ohne einen lokalen Webserver auszuführen. Dadurch wird die oben erwähnte „cross origin“ Fehler aus, die angibt , dass Quer Ursprungs anfordert , wie sie durch die Last Verfahren hergestellt nur für Protokollschemata unterstützt werden wie http, dataoder https. (Ich gehe davon aus, dass Sie keine tatsächliche Cross-Origin-Anfrage stellen, dh die Datei header.html befindet sich tatsächlich in derselben Domain wie die Seite, von der Sie sie anfordern.)

Wenn die oben akzeptierte Antwort für Sie nicht funktioniert, stellen Sie bitte sicher, dass Sie einen Webserver ausführen. Der schnellste und einfachste Weg, dies zu tun, wenn Sie in Eile sind (und einen Mac verwenden, auf dem Python vorinstalliert ist), besteht darin, einen einfachen Python-http-Server hochzufahren. Wie einfach das geht, sehen Sie hier .

Ich hoffe das hilft!

Kennzeichen
quelle
Die Verwendung eines Webservers macht den Punkt jedoch zunichte. Zumindest für mich besteht der Grund für die Verwendung von Javascript darin, es einfacher zu entwickeln.
Konrad Höffner
1

Es ist auch möglich, Skripte und Links in den Header zu laden. Ich werde es eines der obigen Beispiele hinzufügen ...

<!--load_essentials.js-->
document.write('<link rel="stylesheet" type="text/css" href="css/style.css" />');
document.write('<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />');
document.write('<script src="js/jquery.js" type="text/javascript"></script>');

document.getElementById("myHead").innerHTML =
"<span id='headerText'>Title</span>"
+ "<span id='headerSubtext'>Subtitle</span>";
document.getElementById("myNav").innerHTML =
"<ul id='navLinks'>"
+ "<li><a href='index.html'>Home</a></li>"
+ "<li><a href='about.html'>About</a>"
+ "<li><a href='donate.html'>Donate</a></li>"
+ "</ul>";
document.getElementById("myFooter").innerHTML =
"<p id='copyright'>Copyright &copy; " + new Date().getFullYear() + " You. All"
+ " rights reserved.</p>"
+ "<p id='credits'>Layout by You</p>"
+ "<p id='contact'><a href='mailto:[email protected]'>Contact Us</a> / "
+ "<a href='mailto:[email protected]'>Report a problem.</a></p>";

<!--HTML-->
<header id="myHead"></header>
<nav id="myNav"></nav>
Content
<footer id="myFooter"></footer>

<script src="load_essentials.js"></script>
Samuel Omopariola
quelle
0

Ein anderer Ansatz, der seit der ersten Beantwortung dieser Frage zur Verfügung gestellt wurde, ist die Verwendung von reactrb-express (siehe http://reactrb.org ). Auf diese Weise können Sie auf der Clientseite ein Skript in Ruby erstellen und Ihren HTML-Code durch in Ruby geschriebene Reaktionskomponenten ersetzen.

Mitch VanDuyn
quelle
1
op fragte nur mit HTML und Javascript, aber Sie nehmen ihn, um Ruby zu verwenden ..: D lol aber cooler Werkzeugmann ..
Meily Chhon
Ich nahm den Geist der Frage als - ohne serverseitige Vorlagensprachen. Alles wird bis auf Javascript kompiliert, daher glaube ich, dass es die Absicht der Frage erfüllt.
Mitch VanDuyn
-1

Speichern Sie den HTML-Code, den Sie in eine HTML-Datei aufnehmen möchten:

Content.html

<a href="howto_google_maps.asp">Google Maps</a><br>
<a href="howto_css_animate_buttons.asp">Animated Buttons</a><br>
<a href="howto_css_modals.asp">Modal Boxes</a><br>
<a href="howto_js_animate.asp">Animations</a><br>
<a href="howto_js_progressbar.asp">Progress Bars</a><br>
<a href="howto_css_dropdown.asp">Hover Dropdowns</a><br>
<a href="howto_js_dropdown.asp">Click Dropdowns</a><br>
<a href="howto_css_table_responsive.asp">Responsive Tables</a><br>

Fügen Sie den HTML-Code hinzu

Das Einschließen von HTML erfolgt mithilfe eines w3-include-html- Attributs:

Beispiel

    <div w3-include-html="content.html"></div>

Fügen Sie das JavaScript hinzu

HTML-Includes werden von JavaScript ausgeführt.

    <script>
    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;
        }
      }
    }
    </script>

Rufen Sie includeHTML () am Ende der Seite auf:

Beispiel

<!DOCTYPE html>
<html>
<script>
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;
    }
  }
};
</script>
<body>

<div w3-include-html="h1.html"></div> 
<div w3-include-html="content.html"></div> 

<script>
includeHTML();
</script>

</body>
</html>
Raaf003
quelle
Ich bekomme eine weiße leere Seite, wenn ich danach index.html
teste