it-swarm.com.de

Erstellen Sie Kopf- und Fußzeilendateien, die in mehreren HTML-Seiten enthalten sein sollen

Ich möchte allgemeine 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.

100
Prasanth A R

Sie können dies mit jquery erreichen. 

Diesen Code in index.html einfügen

<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.html und footer.html an derselben Stelle wie index.html ein.

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

Wenn Sie jetzt index.html besuchen, sollten Sie auf die Link-Tags klicken können.

157

Müssen Sie die HTML-Dateistruktur mit JavaScript verwenden? Haben Sie überlegt, stattdessen PHP zu verwenden, damit Sie das einfache 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 Zeile Code verwenden, um den Inhalt aus der header.php-Datei einzufügen 

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

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

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

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

Hinweis: 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]
24
Sol

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

Fügen Sie einfach die folgende Zeile hinzu, an der Sie Ihre Datei einfügen möchten:

<!--#include file="include_head.html" -->
21
The Conspiracy

Ich habe folgendes versucht: Erstellen Sie eine Datei header.html like

<!-- 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 jetzt header.html 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.

8
Asheesh Gupta

Sie könnten auch Folgendes angeben: (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>

6
JustinM

Ich denke, die Antworten auf diese Frage sind zu alt ... derzeit unterstützen einige Desktop- und Mobile-Browser HTML Templates.

Ich habe ein kleines Beispiel gebaut: 

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

Weitere Kompatibilitätsinformationen in 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;
}

Ihr könnt mehr Beispiele in diesem HTML5 Rocks Beitrag

5
JavierFuentes

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

Ich stolperte über eine Website, in der die Methoden des "Ditching Jquery" erläutert werden. Es zeigt, dass eine Methode auf der Website genau das tut, was Sie in Jane-Javascript (Referenzlink am Ende des Beitrags) genau richtig machen. Untersuchen Sie unbedingt alle Sicherheitslücken und Kompatibilitätsprobleme, wenn Sie dies in der Produktion einsetzen möchten. Ich bin es nicht, also habe ich selbst nie hineingesehen. 

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>

views/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 eine gute Vanilla-Javascript-Lösung für das OP ist. Der Originalcode lebt hier: http://gomakethings.com/ditching-jquery#get-html-from-another-page

5
darcher

ein weiterer Ansatz, der seit der erstmaligen Beantwortung dieser Frage zur Verfügung gestellt wurde, ist die Verwendung von reactrb-express (siehe http://reactrb.org ). Dadurch können Sie ein Skript in Ruby auf Clientseite erstellen und Ihren HTML-Code durch geschriebene Reakt-Komponenten ersetzen in Ruby.

0
Mitch VanDuyn

Aloha ab 2018. Leider kann ich nichts Cooles oder Futuristisches mit Ihnen teilen. 

Ich möchte jedoch auf diejenigen aufmerksam machen, die kommentiert haben, dass die jQuery load()-Methode in der Gegenwart nicht funktioniert. Sie versuchen wahrscheinlich, die Methode mit lokalen Dateien zu verwenden, ohne einen lokalen Webserver auszuführen. Dadurch wird der oben erwähnte "Cross Origin" -Fehler ausgelöst, der angibt, dass Cross Origin-Anforderungen wie die von der Lademethode gestellten Anforderungen nur für Protokollschemas wie http, data oder https unterstützt werden. (Ich gehe davon aus, dass Sie keine eigentliche Cross-Origin-Anfrage stellen. Die Datei header.html befindet sich tatsächlich in derselben Domäne wie die Seite, von der Sie sie anfordern.)

Wenn die oben genannte akzeptierte Antwort für Sie nicht funktioniert, stellen Sie bitte sicher, dass Sie einen Webserver betreiben. Der schnellste und einfachste Weg, dies zu tun, wenn Sie in Eile sind (und einen Mac verwenden, auf dem Python vorinstalliert ist), wäre ein einfacher Python-HTTP-Server. Sie können sehen, wie einfach das ist hier .

Ich hoffe das hilft!

0
Mark

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>
0