HTML in eine andere HTML-Datei einfügen

Ich habe eine HTML- "Kopf" -Template und eine Navigationsvorlage, die ich in alle meine anderen HTML-Dateien für meine Website einbinden möchte. fand ich diesen Beitrag:HTML in eine andere HTML-Datei einfügen

Include another HTML file in a HTML file

Und meine Frage ist ... was ist, wenn es die Header, die ich aufnehmen möchten?

So zum Beispiel habe ich die folgende Dateistruktur:

/var/www/includes/templates/header.html 
          navigation.html

header.html könnte wie folgt aussehen:

<!DOCTYPE html> 
<html lang="en"> 
<head> 

    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <title>Test Portal</title> 

</head>

In einem Fall wie diesem, kann ich folgen noch das Beispiel in der andere Beitrag, wo sie ein div erstellen und das div über jquery bevölkern?

Quelle

2016-08-08 Happydevdays

ich sehe nicht, warum es nicht funktionieren sollte wie in dem Link beschrieben, den Sie angegeben haben. –

Ich denke, es wäre der beste Weg, um einen HTML-Inhalt/Datei in eine andere HTML-Datei mit jQuery zu integrieren.

Sie können einfach die jquery.js umfassen und die HTML-Datei laden mit $("#includedContentDiv").load("yourFile.html");

Zum Beispiel

<html> 
    <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){ 
     $("#includedContentDiv").load("another_file.html"); 
    }); 
    </script> 
    </head> 

    <body> 
    <div id="includedContentDiv"></div> 
    </body> 
</html>

Es gibt keine solche Tags vorhanden, um die Datei enthalten, aber es gibt einige Dritt Methoden Partei verfügbar so.

<!DOCTYPE html> 
<html> 
<script src="http://www.w3schools.com/lib/w3data.js"></script> 

<body> 

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

<script> 
w3IncludeHTML(); 
</script> 

</body> 
</html>

Manche Menschen verwendet auch

<!--#include virtual="a.html" -->

Quelle

2016-08-09 12:13:47

scheint für mich zu arbeiten – Happydevdays

Gut thn ,,,,: –

die jquery Lösung ist sehr einfach, guter Job –

-1

Verwenden php include

so den Kopf als head.php speichern und in jeder Datei, die Sie Ihren Kopf

<?php include 'path/to/file/head.php';?>

Sie können das gleiche tun mit der Navigation und sogar eine Fußzeile hinzufügen möchten, so dass Sie nur haben um es an einem Ort zu ändern, wenn Sie es jemals bearbeiten müssen.

so Ihr Dokument für eine Ansicht wäre so etwas wie dies

<?php include 'head.php';?> 
<body> 
    <?php include 'navigation.php';?> 

    <!-- page content --> 

    <?php include 'footer.php';?> 
</body>

aussehen Denken Sie daran, Ihre Dateien zu speichern als php anstelle von HTML-Dateien dies zu tun.

Quelle

2016-08-09 12:10:27

Das ursprüngliche Poster hat PHP nicht erwähnt und hat möglicherweise noch nicht einmal PHP-Kenntnisse. Ihr Webserver ist möglicherweise nicht konfiguriert oder PHP geladen, so nur die Dateien umbenennen könnte sehr gut nichts tun. Diese Antwort ist also nicht wirklich hilfreich, da sie keinen Kontext hat. – Lee

@Beachten Sie es nicht. Es gibt einen Weg, um zu bekommen, was das OP mit einem einfachen Bit Code will, benötigt keine PHP-Kenntnisse. Wenn das OP nicht meine Route runtergehen will, ist das ihre Wahl. Genau das würde ich in OPs Position machen. –

Ich stimme nicht mit Ihnen auf der OP nicht brauchen PHP-Kenntnisse. Natürlich brauchen sie ein grundlegendes Wissen darüber, in was sie scripten, oder es wird einfach über ihren Kopf gehen und sie verwirren. Ich habe es markiert, weil es keine hilfreiche Antwort ist, weil Sie von einer völlig anderen Programmiersprache sprechen, aber Sie haben keine Einführung in das Programm gemacht. Und ich weiß, dass sie Ihrer Antwort nicht folgen müssen, das ist aber völlig irrelevant. Ich denke, der Downvote ist gerechtfertigt. – Lee

HTML-Tag.

Ich habe ähnliches Problem konfrontiert, dann habe ich

< iframe src = "b.html" height = "80px "width =" 500px">

Quelle

2016-08-18 14:58:37

ich brauchte um viele Dateien einzuschließen.Also habe ich das folgende Skript:

<script> 
 
    $(function(){ 
 
    $('[id$="-include"]').each(function (e){ 
 
     $(this).load("includes\\" + $(this).attr("id").replace("-include", "") + ".html"); 
 
    }); 
 
    }); 
 
</script>

Verwenden div zum Beispiel einen Platzhalter für das Einfügen zu setzen.

<div id="example-include"></div>

Erstellt Ordner "includes" für alle Dateien, die ich einschließen benötigt. Erstellte Datei "example.html". Es funktioniert mit einer beliebigen Anzahl von Includes. Sie müssen nur die Namenskonvention verwenden und alle enthaltenen Dateien in den richtigen Ordner stellen.

Quelle

2017-12-14 21:22:01

Antwort

Verwandte Themen