Fügen Sie eine weitere HTML-Datei in eine HTML-Datei ein

627

Ich habe 2 HTML-Dateien, nehme an a.htmlund b.html. In a.htmlmöchte ich aufnehmenb.html .

In JSF kann ich das so machen:

<ui:include src="b.xhtml" />

Es bedeutet, dass a.xhtmlich in die Datei aufnehmen kann b.xhtml.

Wie können wir es in *.htmlDatei machen?

javascript html include lolo
quelle

5

mögliches Duplikat von Äquivalent von include () in HTML

Wesley Murch

32

NEIN! Es sind 2 verschiedene Dinge!

Lolo

verwandt, aber für localhost: stackoverflow.com/questions/7542872/…

cregox

MarMarAba

Siehe HTML-Module github.com/w3c/webcomponents/blob/gh-pages/proposals/… und groups.google.com/a/chromium.org/forum/#!msg/blink-dev/… und github.com/w3c / webcomponents / blob / gh-pages / Vorschläge /… und Hintergrunddiskussion unter github.com/w3c/webcomponents/issues/645 und einige Problemdiskussion unter github.com/w3c/webcomponents/issues/783

Sideshowbarker

687

Meiner Meinung nach verwendet die beste Lösung jQuery:

a.html::

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

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

b.html::

<p>This is my include file</p>

Diese Methode ist eine einfache und saubere Lösung für mein Problem.

Die jQuery- .load()Dokumentation finden Sie hier .

lolo
quelle

5

Was ist der Unterschied, wenn Sie nur dieses `<script> $ (" # includeContent "). Load (" b.html "); </ script> ausführen?

Rodrigo Ruiz

10

@RodrigoRuiz $(function(){})wird erst ausgeführt, nachdem das Dokument vollständig geladen wurde .

ProfK

8

Wenn an die enthaltene HTML-Datei CSS angehängt ist, kann dies Ihren Seitenstil durcheinander bringen.

Omar Jaafor

6

Ich bin genau so, wie du es erwähnt hast. Ich verwende Bootstrap und habe CSS-Überschreibungen für B.html. Wenn ich B.html in A.html verwende, damit es als Header von A.html endet, kann ich sehen, dass das CSS seine Priorität verloren hat und ein anderes Layout hat. Irgendwelche Lösungen dafür?.

Pavan Dittakavi

37

Dies erfordert einen Server . Bei Verwendung in einer lokalen Datei:

XMLHttpRequest cannot load file:///.../b.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Basj

155

Wenn Sie die Antwort von lolo von oben erweitern, finden Sie hier etwas mehr Automatisierung, wenn Sie viele Dateien einfügen müssen:

<script>
  $(function(){
    var includes = $('[data-include]');
    jQuery.each(includes, function(){
      var file = 'views/' + $(this).data('include') + '.html';
      $(this).load(file);
    });
  });
</script>

Und dann etwas in das HTML aufzunehmen:

<div data-include="header"></div>
<div data-include="footer"></div>

Dazu gehören die Dateien views / header.html und views / footer.html

mhanisch
quelle

Sehr hilfreich. Gibt es eine Möglichkeit, ein Argument über einen anderen Datenparameter zu übergeben, z. B. data-argumentin der enthaltenen Datei abzurufen?

Chris

@chris Sie können GET-Parameter verwenden, zB$("#postdiv").load('posts.php?name=Test&age=25');

Nam G VU

5

Kleiner Vorschlag - Sie brauchen das nicht class="include"- machen Sie einfach Ihren jQuery-Selektorvar includes = $('[data-include]');

jbyrd

funktioniert nicht auf Chrome mit lokalen Dateien "Ursprungsübergreifende Anforderungen werden nur für Protokollschemata unterstützt: htt"

Artem Bernatskyi

2

@ArtemBernatskyi Hilft es, wenn Sie stattdessen einen lokalen Server ausführen? Hier ist ein einfaches Tutorial: developer.mozilla.org/en-US/docs/Learn/Common_questions/…

mhanisch

146

Meine Lösung ähnelt der von Lolo oben. Ich füge den HTML-Code jedoch über document.write von JavaScript ein, anstatt jQuery zu verwenden:

a.html:

<html> 
  <body>
  <h1>Put your HTML content before insertion of b.js.</h1>
      ...

  <script src="b.js"></script>

      ...

  <p>And whatever content you want afterwards.</p>
  </body>
</html>

b.js:

document.write('\
\
    <h1>Add your HTML code here</h1>\
\
     <p>Notice however, that you have to escape LF's with a '\', just like\
        demonstrated in this code listing.\
    </p>\
\
');

Der Grund für mich gegen die Verwendung von jQuery ist, dass jQuery.js eine Größe von ~ 90 KB hat und ich die zu ladende Datenmenge so klein wie möglich halten möchte.

Um die ordnungsgemäß maskierte JavaScript-Datei ohne großen Aufwand zu erhalten, können Sie den folgenden Befehl sed verwenden:

sed 's/\\/\\\\/g;s/^.*$/&\\/g;s/'\''/\\'\''/g' b.html > escapedB.html

Oder benutzen Sie einfach die folgenden praktischen Bash - Skript als Gist auf Github veröffentlicht, die alle notwendigen Arbeiten automatisiert, Umwandlung b.htmlzu b.js: https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6

Dank an Greg Minshall für den verbesserten sed-Befehl, der auch Schrägstrichen und einfachen Anführungszeichen entgeht, die mein ursprünglicher sed-Befehl nicht berücksichtigt hat.

Alternativ für Browser, die Vorlagenliterale unterstützen funktioniert auch Folgendes:

b.js:

document.write(`

    <h1>Add your HTML code here</h1>

     <p>Notice, you do not have to escape LF's with a '\',
        like demonstrated in the above code listing.
    </p>

`);

Tafkadasoh
quelle

4

@TrevorHickey Ja, Sie haben Recht, das ist der Nachteil meiner Lösung, und das ist nicht sehr elegant. Da Sie jedoch am Ende jeder Zeile ein '\' mit einem einfachen regulären Ausdruck einfügen können, funktioniert dies am besten für mich. Hmm ... vielleicht sollte ich meiner Antwort hinzufügen, wie man das Einfügen über Regex macht ...

Tafkadasoh

2

Oh meine Güte, das ist hässlich - nein danke. Ich würde mein HTML lieber als HTML schreiben. Es ist mir egal, ob ich sed in der Befehlszeile verwenden kann - ich möchte mich nicht jedes Mal darauf verlassen müssen, wenn ich den Inhalt der Vorlage ändere.

8.

1

@ Goodra Es sollte auf jedem HTML ohne 'Markierungen funktionieren . Wenn Sie nur ein Suchen / Ersetzen durchführen, um ` with \ `DANN suchen / ersetzen, um 'durch \'und neue Zeilen durch` `neue Zeilen zu ersetzen, funktioniert dies einwandfrei.

wizzwizz4

1

@ wizzwizz4: Dank Greg entgeht der Befehl sed jetzt auch einfachen Anführungszeichen und Backslashes. Außerdem habe ich ein Bash-Skript hinzugefügt, das die ganze Arbeit für Sie erledigt. :-)

Tafkadasoh

1

Sie können Backticks verwenden `- dann können Sie Ausdrücke einfügen wie ${var}- Sie müssen dann nur noch entkommen \`und\$

inetphantom

85

Checkout HTML5-Importe über Html5rocks Tutorial und bei Polymer-Project

Zum Beispiel:

<head>
  <link rel="import" href="/path/to/imports/stuff.html">
</head>

user1587439
quelle

27

HTML-Importe sollen den Inhalt nicht direkt auf der Seite enthalten. Der Code in dieser Antwort wird nur als Vorlage auf der übergeordneten Seite stuff.htmlverfügbar gemacht. Sie müssen jedoch Skripte verwenden, um Klone des DOM auf der übergeordneten Seite zu erstellen , damit sie für den Benutzer sichtbar sind.

Waldyrious

1

Die Anweisungen auf html5rocks.com zum Einfügen des Inhalts einer HTML-Seite in eine andere scheinen in vielen Browsern noch nicht zu funktionieren. Ich habe es in Opera 12.16 und Superbird Version 32.0.1700.7 (233448) ohne Wirkung (unter Xubuntu 15.04) versucht. Ich habe gehört, dass es in Firefox (aufgrund eines hoffentlich behobenen Fehlers) oder in vielen Versionen von Chrome nicht funktioniert. Obwohl es so aussieht, als wäre es in Zukunft eine ideale Lösung, ist es keine browserübergreifende Lösung.

Brōtsyorfuzthrāx

1

Anscheinend nicht fertig ab Ende 2016 in FireFox (45.5.1 ESR). JS-Konsole sagt : TypeError: ... .import is undefined. MDN sagt: "Diese Funktion ist derzeit in keinem Browser nativ implementiert." Weiß jemand, ob es möglich ist, FF mit dieser Funktion zu erstellen?

Sphakka

3

Firefox wird es nicht unterstützen. Um es zu aktivieren, versuchen Sie "dom.webcomponents.enabled" zu setzen. Es funktioniert nur in Chrome und Opera, Android mit aktualisierbarer Webansicht (ab 4.4.3). Apple-Browser unterstützen dies nicht. Es sieht nach einer guten Idee für Webkomponenten aus, ist aber noch nicht weit verbreitet.

Maxim

9

Update Ende 2018: HTML-Importe werden anscheinend aus irgendeinem Grund nicht mehr unterstützt

V. Rubinetti

60

Schamloser Plug einer Bibliothek, die ich geschrieben habe, um dies zu lösen.

https://github.com/LexmarkWeb/csi.js

<div data-include="/path/to/include.html"></div>

Das Obige nimmt den Inhalt von /path/to/include.htmlund ersetzt ihn divdurch ihn.

Michael Marr
quelle

4

Wird JavaScript ausgewertet, wenn include.html es eingebettet hat?

Seth

1

@ Seth scheint es nicht. Ich werde mit dem src herumspielen und sehen, ob ich das schaffen kann. Vielen Dank an michael-marr

xandout

2

Brillant!!!! Ihre scheint die einzige Lösung zu sein, die das div-Tag ersetzt, das als Token für das Einfügen verwendet wird. Ich werde die Quelle später sorgfältig studieren !! :-)

kpollock

1

Dank dieser Funktion enthält es das HTML / CSS, aber nicht das Javascript aus den Quelldateien. Sie müssen es nur wieder einfügen, wo immer Sie das verwenden <div data-include="/path/to/include.html"></div>. Dieses Tool erleichtert es, ein einfaches mehrseitiges No-Plugin-Modell auf saubere Weise zu erstellen.

Vincent Tang

1

Kann ich diese Bibliothek in einer beliebigen Anwendung verwenden? Ich meine, wie kann man den Autor gutschreiben? W3School hat eine ähnliche Lösung, nur den Unterschied, dass Ihr Code auch rekursiven Aufruf beim Laden von Fenstern ermöglicht .... w3schools.com/howto/tryit.asp?filename=tryhow_html_include_1

yeppe

43

Eine einfache serverseitige Include-Anweisung zum Einfügen einer anderen Datei, die sich im selben Ordner befindet, sieht folgendermaßen aus:

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

Webdesign7 London
quelle

21

Sie müssen Ihren Server für die Verwendung von SSI

konfigurieren

7

Hier ist eine Referenz zum Konfigurieren der SSI für Ihren Server: httpd.apache.org/docs/2.4/howto/ssi.html#configuring

shasi kanth

Könnte ein Versuch wert, als auch

jimmyjudas

Durch die SSI-Aufnahme wird der Webserver etwas langsamer (sollte also bis zur absoluten Notwendigkeit vermieden werden).

Amit Verma

36

Keine Notwendigkeit für Skripte. Keine Notwendigkeit, irgendwelche ausgefallenen Sachen serverseitig zu machen (obwohl das wahrscheinlich eine bessere Option wäre)

<iframe src="/path/to/file.html" seamless></iframe>

Da alte Browser kein nahtloses System unterstützen, sollten Sie CSS hinzufügen, um das Problem zu beheben:

iframe[seamless] {
    border: none;
}

Beachten Sie, dass bei Browsern, die keine nahtlose Unterstützung bieten, der Frame auf diese URL und nicht auf das gesamte Fenster verweist, wenn Sie auf einen Link im Iframe klicken . Eine Möglichkeit, dies zu umgehen, besteht darin, alle Links zu haben target="_parent", obwohl die Browserunterstützung "gut genug" ist.

bjb568
quelle

7

Es scheint beispielsweise keine CSS-Stile von der übergeordneten Seite anzuwenden.

Randy

5

@ Randy Also? Dies könnte als Plus gewertet werden (insbesondere für benutzergenerierte Inhalte und dergleichen). Sie können die CSS-Dateien ohnehin problemlos wieder einfügen, ohne eine weitere Anfrage zu stellen, da sie sowieso zwischengespeichert werden.

bjb568

Beantwortete meine Bedürfnisse für die Antwort auf diese Frage - wie man eine HTML-Datei in eine andere HTML-Datei

einfügt

2

Das ist die beste Antwort OHNE JQuery oder Skripte. Schön bjb568 danke!

DBS

12

Das seamlessAttribut wurde aus dem HTML-Entwurf entfernt, aus dem es stammt. Benutze es nicht.

Mitja

33

Eine sehr alte Lösung, die ich damals erfüllt habe, aber so geht's mit standardkonformem Code:

<!--[if IE]>
<object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="some.html">
<p>backup content</p>
</object>
<![endif]-->

<!--[if !IE]> <-->
<object type="text/html" data="some.html">
<p>backup content</p>
</object>
<!--> <![endif]-->

Aleksandar Vacić
quelle

9

Es scheint <object>, <embed>und <iframe>alle funktionieren dafür, aber in allen drei Fällen erstellen sie separate Dokumente mit ihren eigenen Stil- und Skriptkontexten (iframe enthält insbesondere hässliche Rahmen und Bildlaufleisten), und zum Beispiel öffnen sich standardmäßig alle Links in ihnen und nicht in der übergeordnete Seite (obwohl dies mit target = "_ parent" überschrieben werden kann). Von all diesen ist iframe der einzige, der Hoffnung hat, durch das HTML5- seamlessAttribut (erwähnt von bjb568) stärker integriert zu werden , aber es wird noch nicht gut unterstützt: caniuse.com/#feat=iframe-seamless

waldyrious

2

iframe-nahtlos wurde aus dem HTML-Standard entfernt: github.com/whatwg/html/issues/331 . Also @waldyrious Kommentar ist nicht mehr korrekt (möchten Sie Ihren Kommentar aktualisieren?)

Tomáš Pospíšek

1

Vielen Dank für das Heads-up, @ TomášPospíšek. Ich kann meinen Kommentar nicht mehr bearbeiten, aber hoffentlich bietet Ihre Antwort den Lesern die notwendige Einschränkung. Der letzte Satz (über das seamlessAttribut) ist der einzige veraltete Teil - der Rest gilt weiterhin.

Waldyrious

17

Wenn Sie auf Ihrem Server Zugriff auf die .htaccess-Datei haben, können Sie alternativ eine einfache Anweisung hinzufügen, mit der PHP für Dateien interpretiert werden kann, die mit der Erweiterung .html enden.

RemoveHandler .html
AddType application/x-httpd-php .php .html

Jetzt können Sie ein einfaches PHP-Skript verwenden, um andere Dateien einzuschließen, wie z.

<?php include('b.html'); ?>

rtd1123
quelle

28

Ja, das ist ein sehr schlechter Rat. HTML-Dateien sind statisch und werden von Apache sehr schnell bereitgestellt. Wenn Sie alle HTML-Dateien zum PHP-Parser hinzufügen, um nur Dateien einzuschließen, treten auf Ihren Servern viele Leistungsprobleme auf. Die Javascript-Methode (jQuery oder einfaches JS) ist keine sehr gute Lösung, aber sie ist immer noch viel effizienter und weniger gefährlich als diese.

Gfra54

@ Gfra54 Meinst du, dass wir Leistungsprobleme haben werden, wenn wir Apache nur dafür verwenden und wir keine PHP-Arbeit für die Site machen? Oder wird es langsamer, wenn ich PHP und dieses Ding zusammen benutze?

user3459110

1

Achtung: Das Hinzufügen dieser Zeilen zu .htaccesskann dazu führen, dass htmlSeiten versuchen, als Dateien herunterzuladen, anstatt sie im Browser anzuzeigen. Zuerst testen. Haftungsausschluss: Das ist mir gerade passiert, als ich die obige Lösung ausprobiert habe. Mein .htaccesswar bis auf zwei Zeilen leer. Vorsicht ist geboten. Versuchen Sie lolostattdessen die jQuery-Lösung (unten).

Cssyphus

Mann, ich habe mich kompliziert, obwohl ich es schon einmal getan habe. Danke für die Erinnerung. Für den Zweck, den ich brauche, wirkt es sich nicht wirklich auf die Leistung aus, also bin ich cool.

Gman

Ha, diese leistungsschädigende Antwort ist ein großartiges Beispiel für unkonventionelles Denken. Ich würde es nie vorschlagen, aber vielleicht ein Lebensretter, wenn Sie ein bisschen PHP-Vorschlaghammer brauchen. :-)

Moodboom

14

Das Folgende funktioniert, wenn HTML-Inhalte aus einer Datei enthalten sein müssen: Die folgende Zeile enthält beispielsweise den Inhalt vonpiece_to_include.html an der Stelle, an der die OBJECT-Definition auftritt.

...text before...
<OBJECT data="file_to_include.html">
Warning: file_to_include.html could not be included.
</OBJECT>
...text after...

Referenz: http://www.w3.org/TR/WD-html40-970708/struct/includes.html#h-7.7.4

Cooler Typ
quelle

2

Funktioniert wie ein Zauber und ist die sauberste Lösung. Dies sollte die akzeptierte Antwort sein.

Vbocan

Zustimmen. Nur eine Anmerkung: Versuchen Sie nicht, ein selbstschließendes Objekt-Tag zu erstellen. Der Text danach wird gelöscht.

Sridhar Sarnobat

Es scheint ein neues "#document" zu erstellen, das automatisch neue, verschachtelte <html> - und <body> -Tags enthält. Dies funktionierte nicht für meinen Zweck; Meine HTML-Datei enthält <script src = "..." type = "text / javascript"> Tags. aber der JS hat neue Referenzfehler bekommen.

IAM_AL_X

12

Hier ist meine Lösung vor Ort:

(() => {
    const includes = document.getElementsByTagName('include');
    [].forEach.call(includes, i => {
        let filePath = i.getAttribute('src');
        fetch(filePath).then(file => {
            file.text().then(content => {
                i.insertAdjacentHTML('afterend', content);
                i.remove();
            });
        });
    });
})();

<p>FOO</p>

<include src="a.html">Loading...</include>

<p>BAR</p>

<include src="b.html">Loading...</include>

<p>TEE</p>

Erweitern Sie das Snippet

Mustafa Burak Kalkan
quelle

1

Wow, es ist einfacher

Arian Saputra

Wirklich schöne und einfache Lösung, danke ^^

Remling

11

In w3.js sind folgende Arbeiten enthalten:

<body>
<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>

Eine korrekte Beschreibung finden Sie hier: https://www.w3schools.com/howto/howto_html_include.asp

Kaj Risberg
quelle

Wenn Sie wissen möchten, wann das Dokument geladen wurde, können Sie dies am Ende des Dokuments einfügen: <img src = "thisimagedoesnotexist.dmy" onerror = 'initDocument ()' style = 'display: none;'> Cleverer Trick , wie?

Kaj Risberg

2

funktioniert nicht mit Google Chrome.

Deepcell

9

Das hat mir geholfen. Um einen Block HTML-Code von b.htmlbis hinzuzufügen a.html, sollte dies in das headTag von a.html:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Dann wird im Body-Tag ein Container mit einer eindeutigen ID und einem Javascript-Block erstellt, um den b.htmlwie folgt in den Container zu laden :

<div id="b-placeholder">

</div>

<script>
$(function(){
  $("#b-placeholder").load("b.html");
});
</script>

Ramtin
quelle

6

Wie unterscheidet sich diese Antwort von der akzeptierten Antwort auf diese Frage?

Mohammad Usman

2

@MohammadUsman Hier liegen der Container und der Javascript-Code im Body-Tag, während die akzeptierte Antwort sie im Head-Tag platziert und den Container nur im Body-Tag belässt.

Ramtin

Dies ist keine neue Antwort wert ... es ist ein Kommentar

Kennet Celeste

8

Ich weiß, dass dies ein sehr alter Beitrag ist, daher waren einige Methoden damals nicht verfügbar. Aber hier ist meine sehr einfache Sichtweise (basierend auf Lolos Antwort).

Es basiert auf den HTML5-Daten- * -Attributen und ist daher sehr allgemein, da es die jQuery-Funktion für jede Funktion verwendet, um jede mit "load-html" übereinstimmende .class-Übereinstimmung abzurufen, und das entsprechende 'Datenquellen'-Attribut verwendet, um den Inhalt zu laden:

<div class="container-fluid">
    <div class="load-html" id="NavigationMenu" data-source="header.html"></div>
    <div class="load-html" id="MainBody" data-source="body.html"></div>
    <div class="load-html" id="Footer" data-source="footer.html"></div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function () {
    $(".load-html").each(function () {
        $(this).load(this.dataset.source);
    });
});
</script>

Ben Mc
quelle

7

Sie können eine Polyfüllung aus HTML-Importen ( https://www.html5rocks.com/en/tutorials/webcomponents/imports/ ) oder diese vereinfachte Lösung verwenden https://github.com/dsheiko/html-import verwenden

Auf der Seite importieren Sie beispielsweise den folgenden HTML-Block:

<link rel="html-import" href="./some-path/block.html" >

Der Block kann eigene Importe haben:

<link rel="html-import" href="./some-other-path/other-block.html" >

Der Importer ersetzt die Direktive durch das geladene HTML, ähnlich wie SSI

Diese Anweisungen werden automatisch bereitgestellt, sobald Sie dieses kleine JavaScript laden:

<script async src="./src/html-import.js"></script>

Die Importe werden verarbeitet, wenn DOM automatisch bereit ist. Außerdem wird eine API verfügbar gemacht, mit der Sie manuell ausführen, Protokolle abrufen usw. können. Genießen :)

Dmitry Sheiko
quelle

Wohin soll die Skriptzeile in der HTML-Datei gehen?

Andrew Truckle

Überall im KÖRPER. Kann rekursiv in den Inhalt der enthaltenen Dateien

eingefügt

Hast du das getestet?

Bhikkhu Subhuti

Sicher habe ich es getan. Ich benutze es tatsächlich seit Jahren. Warum fragst du? Irgendwelche Probleme?

Dmitry Sheiko

Der "Schlüssel" dazu ist also der, wie script async srces scheint. Probieren Sie es aus!

Javadba

6

Die meisten Lösungen funktionieren, aber sie haben Probleme mit jquery :

Das Problem besteht darin, dass der folgende Code $(document).ready(function () { alert($("#includedContent").text()); }nichts warnt, anstatt den enthaltenen Inhalt zu warnen.

Ich schreibe den folgenden Code, in meiner Lösung können Sie auf enthaltene Inhalte in der $(document).readyFunktion zugreifen :

(Der Schlüssel lädt den enthaltenen Inhalt synchron).

index.htm :

<html>
    <head>
        <script src="jquery.js"></script>

        <script>
            (function ($) {
                $.include = function (url) {
                    $.ajax({
                        url: url,
                        async: false,
                        success: function (result) {
                            document.write(result);
                        }
                    });
                };
            }(jQuery));
        </script>

        <script>
            $(document).ready(function () {
                alert($("#test").text());
            });
        </script>
    </head>

    <body>
        <script>$.include("include.inc");</script>
    </body>

</html>

include.inc :

<div id="test">
    There is no issue between this solution and jquery.
</div>

jquery include Plugin auf Github

Amir Saniyan
quelle

Wenn Sie dies verwenden und dann die Seitenquelle in einem Browser anzeigen, wird nur das Skript angezeigt. Beeinträchtigt dies nicht die Fähigkeit einer Suchmaschine, Ihre Website zu analysieren und letztendlich alle SEO-Bemühungen zu zerstören?

hmcclungiii

Ja, diese Methode zerstört jede SEO :)

Amir Saniyan

Andererseits tut dies jede JavaScript-basierte Methode.

wizzwizz4

5

So fügen Sie den Inhalt der genannten Datei ein:

<!--#include virtual="filename.htm"-->

St.Eve
quelle

1

Verwenden von spitzen Klammern für []: [! - # include virtual = "include_omega.htm" -]

St.Eve

4

Die Antwort des Athari (die erste!) War zu schlüssig! Sehr gut!

Wenn Sie jedoch den Namen der Seite als URL-Parameter übergeben möchten, bietet dieser Beitrag eine sehr schöne Lösung in Kombination mit:

http://www.jquerybyexample.net/2012/06/get-url-parameters-using-jquery.html

So wird es ungefähr so:

Ihre URL:

www.yoursite.com/a.html?p=b.html

Der a.html- Code lautet nun:

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    function GetURLParameter(sParam)
    {
      var sPageURL = window.location.search.substring(1);
      var sURLVariables = sPageURL.split('&');
      for (var i = 0; i < sURLVariables.length; i++) 
      {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
      }
    }
    $(function(){
      var pinc = GetURLParameter('p');
      $("#includedContent").load(pinc); 
    });
    </script> 
  </head> 

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

Es hat sehr gut für mich funktioniert! Ich hoffe ich habe geholfen :)

Massa
quelle

Sicherheitsproblem, weil Sie jemandem diesen Link senden können: www.yoursite.com/a.html?p=htttp://www.linktovir.us/here.html

JoostS

4

html5rocks.com hat ein sehr gutes Tutorial zu diesem Thema, und das mag etwas spät sein, aber ich selbst wusste nicht, dass es das gibt. w3schools hat auch die Möglichkeit, dies mit ihrer neuen Bibliothek namens w3.js zu tun. Die Sache ist, dies erfordert die Verwendung eines Webservers und eines HTTPRequest-Objekts. Sie können diese nicht lokal laden und auf Ihrem Computer testen. Sie können jedoch Polyfills verwenden, die über den Link html5rocks oben bereitgestellt werden, oder dem Tutorial folgen. Mit ein wenig JS-Magie können Sie so etwas tun:

 var link = document.createElement('link');
 if('import' in link){
     //Run import code
     link.setAttribute('rel','import');
     link.setAttribute('href',importPath);
     document.getElementsByTagName('head')[0].appendChild(link);
     //Create a phantom element to append the import document text to
     link = document.querySelector('link[rel="import"]');
     var docText = document.createElement('div');
     docText.innerHTML = link.import;
     element.appendChild(docText.cloneNode(true));
 } else {
     //Imports aren't supported, so call polyfill
     importPolyfill(importPath);
 }

Dadurch wird der Link erstellt (kann sich als gewünschtes Linkelement ändern, wenn er bereits festgelegt ist), der Import festgelegt wird (sofern Sie ihn nicht bereits haben) und anschließend angehängt. Von dort nimmt es das und analysiert die Datei in HTML und hängt sie dann unter einem div an das gewünschte Element an. Dies kann alles geändert werden, um Ihren Anforderungen vom anhängenden Element bis zum von Ihnen verwendeten Link zu entsprechen. Ich hoffe, dies hat geholfen. Es ist jetzt möglicherweise irrelevant, ob neuere, schnellere Methoden ohne Verwendung von Bibliotheken und Frameworks wie jQuery oder W3.js herausgekommen sind.

UPDATE: Dies führt zu einem Fehler, der besagt, dass der lokale Import durch die CORS-Richtlinie blockiert wurde. Möglicherweise benötigen Sie Zugriff auf das Deep Web, um dies aufgrund der Eigenschaften des Deep Web verwenden zu können. (Bedeutet keine praktische Verwendung)

SubLock69
quelle

4

Hier ist mein Ansatz mit Fetch API und Async-Funktion

<div class="js-component" data-name="header" data-ext="html"></div>
<div class="js-component" data-name="footer" data-ext="html"></div>

<script>
    const components = document.querySelectorAll('.js-component')

    const loadComponent = async c => {
        const { name, ext } = c.dataset
        const response = await fetch(`${name}.${ext}`)
        const html = await response.text()
        c.innerHTML = html
    }

    [...components].forEach(loadComponent)
</script>

barro32
quelle

3

Derzeit gibt es keine direkte HTML-Lösung für die Aufgabe. Sogar HTML-Importe (die permanent im Entwurf sind ) werden das nicht tun, da Import! = Include und etwas JS-Magie sowieso erforderlich sind.
Ich habe kürzlich ein VanillaJS- Skript geschrieben , das nur dazu dient, HTML ohne Komplikationen in HTML aufzunehmen.

Einfach in deine a.html

<link data-wi-src="b.html" />
<!-- ... and somewhere below is ref to the script ... -->
<script src="wm-html-include.js"> </script>

Es ist open-sourceund kann eine Idee geben (ich hoffe)

al.scvorets
quelle

3

Sie können dies mit der JavaScript-Bibliothek jQuery wie folgt tun:

HTML:

<div class="banner" title="banner.html"></div>

JS:

$(".banner").each(function(){
    var inc=$(this);
    $.get(inc.attr("title"), function(data){
        inc.replaceWith(data);
    });
});

Bitte beachten Sie, dass banner.htmlsich diese unter derselben Domain befinden sollten, in der sich auch Ihre anderen Seiten befinden. Andernfalls lehnen Ihre Webseiten die banner.htmlDatei aufgrund von Richtlinien zur gemeinsamen Nutzung von Ressourcen ab .

Beachten Sie außerdem, dass Google beim Laden Ihrer Inhalte mit JavaScript diese nicht indizieren kann, sodass dies aus SEO-Gründen nicht gerade eine gute Methode ist.

AndrewL64
quelle

2

Haben Sie eine iFrame-Injektion versucht?

Es fügt den iFrame in das Dokument ein und löscht sich selbst (es soll sich dann im HTML-DOM befinden).

<iframe src="header.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>

Grüße

Alban Lusitanae
quelle

1

Ich bin zu diesem Thema gekommen, um etwas Ähnliches zu suchen, aber ein bisschen anders als das Problem von Lolo. Ich wollte eine HTML-Seite erstellen, die ein alphabetisches Menü mit Links zu anderen Seiten enthält, und jede der anderen Seiten kann vorhanden sein oder nicht, und die Reihenfolge, in der sie erstellt wurden, ist möglicherweise nicht alphabetisch (oder sogar numerisch). Ebenso wie Tafkadasoh wollte ich die Webseite nicht mit jQuery aufblähen. Nachdem ich das Problem untersucht und mehrere Stunden lang experimentiert habe, hat Folgendes für mich funktioniert, wobei relevante Anmerkungen hinzugefügt wurden:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/application/html; charset=iso-8859-1">
  <meta name="Author" content="me">
  <meta copyright="Copyright" content= "(C) 2013-present by me" />
  <title>Menu</title>

<script type="text/javascript">
<!--
var F000, F001, F002, F003, F004, F005, F006, F007, F008, F009,
    F010, F011, F012, F013, F014, F015, F016, F017, F018, F019;
var dat = new Array();
var form, script, write, str, tmp, dtno, indx, unde;

/*
The "F000" and similar variables need to exist/be-declared.
Each one will be associated with a different menu item,
so decide on how many items maximum you are likely to need,
when constructing that listing of them.  Here, there are 20.
*/


function initialize()
{ window.name="Menu";
  form = document.getElementById('MENU');
  for(indx=0; indx<20; indx++)
  { str = "00" + indx;
    tmp = str.length - 3;
    str = str.substr(tmp);
    script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = str + ".js";
    form.appendChild(script);
  }

/*
The for() loop constructs some <script> objects
and associates each one with a different simple file name,
starting with "000.js" and, here, going up to "019.js".
It won't matter which of those files exist or not.
However, for each menu item you want to display on this
page, you will need to ensure that its .js file does exist.

The short function below (inside HTML comment-block) is,
generically, what the content of each one of the .js files looks like:
<!--
function F000()
{ return ["Menu Item Name", "./URLofFile.htm", "Description string"];
}
-->

(Continuing the remarks in the main menu.htm file)
It happens that each call of the form.appendChild() function
will cause the specified .js script-file to be loaded at that time.
However, it takes a bit of time for the JavaScript in the file
to be fully integrated into the web page, so one thing that I tried,
but it didn't work, was to write an "onload" event handler.
The handler was apparently being called before the just-loaded
JavaScript had actually become accessible.

Note that the name of the function in the .js file is the same as one
of the the pre-defined variables like "F000".  When I tried to access
that function without declaring the variable, attempting to use an
"onload" event handler, the JavaScript debugger claimed that the item
was "not available".  This is not something that can be tested-for!
However, "undefined" IS something that CAN be tested-for.  Simply
declaring them to exist automatically makes all of them "undefined".
When the system finishes integrating a just-loaded .js script file,
the appropriate variable, like "F000", will become something other
than "undefined".  Thus it doesn't matter which .js files exist or
not, because we can simply test all the "F000"-type variables, and
ignore the ones that are "undefined".  More on that later.

The line below specifies a delay of 2 seconds, before any attempt
is made to access the scripts that were loaded.  That DOES give the
system enough time to fully integrate them into the web page.
(If you have a really long list of menu items, or expect the page
to be loaded by an old/slow computer, a longer delay may be needed.)
*/

  window.setTimeout("BuildMenu();", 2000);
  return;
}


//So here is the function that gets called after the 2-second delay  
function BuildMenu()
{ dtno = 0;    //index-counter for the "dat" array
  for(indx=0; indx<20; indx++)
  { str = "00" + indx;
    tmp = str.length - 3;
    str = "F" + str.substr(tmp);
    tmp = eval(str);
    if(tmp != unde) // "unde" is deliberately undefined, for this test
      dat[dtno++] = eval(str + "()");
  }

/*
The loop above simply tests each one of the "F000"-type variables, to
see if it is "undefined" or not.  Any actually-defined variable holds
a short function (from the ".js" script-file as previously indicated).
We call the function to get some data for one menu item, and put that
data into an array named "dat".

Below, the array is sorted alphabetically (the default), and the
"dtno" variable lets us know exactly how many menu items we will
be working with.  The loop that follows creates some "<span>" tags,
and the the "innerHTML" property of each one is set to become an
"anchor" or "<a>" tag, for a link to some other web page.  A description
and a "<br />" tag gets included for each link.  Finally, each new
<span> object is appended to the menu-page's "form" object, and thereby
ends up being inserted into the middle of the overall text on the page.
(For finer control of where you want to put text in a page, consider
placing something like this in the web page at an appropriate place,
as preparation:
<div id="InsertHere"></div>
You could then use document.getElementById("InsertHere") to get it into
a variable, for appending of <span> elements, the way a variable named
"form" was used in this example menu page.

Note: You don't have to specify the link in the same way I did
(the type of link specified here only works if JavaScript is enabled).
You are free to use the more-standard "<a>" tag with the "href"
property defined, if you wish.  But whichever way you go,
you need to make sure that any pages being linked actually exist!
*/

  dat.sort();
  for(indx=0; indx<dtno; indx++)
  { write = document.createElement('span');
    write.innerHTML = "<a onclick=\"window.open('" + dat[indx][1] +
                      "', 'Menu');\" style=\"color:#0000ff;" + 
                      "text-decoration:underline;cursor:pointer;\">" +
                      dat[indx][0] + "</a> " + dat[indx][2] + "<br />";
    form.appendChild(write);
  }
  return;
}

// -->
</script>
</head>

<body onload="initialize();" style="background-color:#a0a0a0; color:#000000; 

font-family:sans-serif; font-size:11pt;">
<h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;MENU
<noscript><br /><span style="color:#ff0000;">
Links here only work if<br />
your browser's JavaScript<br />
support is enabled.</span><br /></noscript></h2>
These are the menu items you currently have available:<br />
<br />
<form id="MENU" action="" onsubmit="return false;">
<!-- Yes, the <form> object starts out completely empty -->
</form>
Click any link, and enjoy it as much as you like.<br />
Then use your browser's BACK button to return to this Menu,<br />
so you can click a different link for a different thing.<br />
<br />
<br />
<small>This file (web page) Copyright (c) 2013-present by me</small>
</body>
</html>

vernonner3voltazim
quelle

1

Hier ist ein großartiger Artikel . Sie können eine allgemeine Bibliothek implementieren und einfach den folgenden Code verwenden, um HTML-Dateien in einer Zeile zu importieren.

<head>
   <link rel="import" href="warnings.html">
</head>

Sie können auch Google Polymer ausprobieren

Dhiral Pandya
quelle

6

"Verwenden Sie einfach den folgenden Code, um HTML-Dateien in einer Zeile zu importieren" ist ziemlich unaufrichtig. Sie müssen dann einige JS schreiben, um den von Ihnen importierten Inhalt zu verwenden, sodass er weit mehr als "eine Zeile" enthält.

Skybondsor

1

Verwenden von ES6-Backticks ``: Template-Literale !

let nick = "Castor", name = "Moon", nuts = 1

more.innerHTML = `

<h1>Hello ${nick} ${name}!</h1>

You collected ${nuts} nuts so far!

<hr>

Double it and get ${nuts + nuts} nuts!!

`

<div id="more"></div>

Erweitern Sie das Snippet

Auf diese Weise können wir HTML einschließen, ohne Anführungszeichen zu codieren, Variablen aus dem DOM einschließen und so weiter.

Es ist eine leistungsstarke Template-Engine. Wir können separate JS-Dateien verwenden und Ereignisse verwenden, um den Inhalt an Ort und Stelle zu laden, oder sogar alles in Blöcken trennen und bei Bedarf aufrufen:

let inject = document.createElement('script');
inject.src= '//....com/template/panel45.js';
more.appendChild(inject);

https://caniuse.com/#feat=template-literals

NVRM
quelle

1

Schönes Beispiel - warum keine Upvotes (bis jetzt)?

Javadba

Hey, du hast recht, 2018 war das Obige ein klares Zeichen für ein wirklich gutes RTFM;) Ich habe dieses javascriptAbzeichen als Hobby-Programmierer bis dahin weitgehend zerschlagen .

NVRM

1

Damit Solution funktioniert, müssen Sie die Datei csi.min.js einfügen, die Sie hier finden .

Gemäß dem auf GitHub gezeigten Beispiel müssen Sie zur Verwendung dieser Bibliothek die Datei csi.js in Ihren Seitenkopf aufnehmen und anschließend das Attribut data-include mit dem Wert, der auf die Datei festgelegt ist, die Sie einschließen möchten, in den Container einfügen Element.

Kopiercode ausblenden

<html>
  <head>
    <script src="csi.js"></script>
  </head>
  <body>
    <div data-include="Test.html"></div>
  </body>
</html>

... ich hoffe es hilft.

Hamza Ali
quelle

0

PHP ist eine Skriptsprache auf Serverebene. Es kann viele Dinge tun, aber eine beliebte Verwendung ist das Einfügen von HTML-Dokumenten in Ihre Seiten, ähnlich wie bei SSI. Wie bei SSI handelt es sich hierbei um eine Technologie auf Serverebene. Wenn Sie nicht sicher sind, ob Ihre Website über PHP-Funktionen verfügt, wenden Sie sich an Ihren Hosting-Anbieter.

Hier ist ein einfaches PHP-Skript, mit dem Sie einen HTML-Ausschnitt auf jeder PHP-fähigen Webseite einfügen können:

Speichern Sie den HTML-Code für die allgemeinen Elemente Ihrer Site, um Dateien zu trennen. Beispielsweise kann Ihr Navigationsbereich als navigation.html oder navigation.php gespeichert werden. Verwenden Sie den folgenden PHP-Code, um diesen HTML-Code in jede Seite aufzunehmen.

<?php require($DOCUMENT_ROOT . "navigation.php"); ?>

Verwenden Sie auf jeder Seite, auf der Sie die Datei einfügen möchten, denselben Code. Stellen Sie sicher, dass Sie den hervorgehobenen Dateinamen in den Namen und den Pfad zu Ihrer Include-Datei ändern.

Udara Pathirage
quelle

0

Wenn Sie ein Framework wie Django / Bootle verwenden, wird häufig eine Template-Engine ausgeliefert. Angenommen, Sie verwenden eine Flasche, und die Standardvorlagen-Engine ist SimpleTemplate Engine . Und unten ist die reine HTML-Datei

$ cat footer.tpl
<hr> <footer>   <p>&copy; stackoverflow, inc 2015</p> </footer>

Sie können die Datei footer.tpl in Ihre Hauptdatei aufnehmen, z.

$ cat dashboard.tpl
%include footer

Außerdem können Sie Parameter an Ihre dashborard.tpl übergeben.

Jaseywang
quelle

0

Basierend auf der Antwort von https://stackoverflow.com/a/31837264/4360308 habe ich diese Funktionalität mit Nodejs (+ Express + Cheerio) wie folgt implementiert:

HTML (index.html)

<div class="include" data-include="componentX" data-method="append"></div>
<div class="include" data-include="componentX" data-method="replace"></div>

JS

function includeComponents($) {
    $('.include').each(function () {
        var file = 'view/html/component/' + $(this).data('include') + '.html';
        var dataComp = fs.readFileSync(file);
        var htmlComp = dataComp.toString();
        if ($(this).data('method') == "replace") {
            $(this).replaceWith(htmlComp);
        } else if ($(this).data('method') == "append") {
            $(this).append(htmlComp);
        }
    })
}

function foo(){
    fs.readFile('./view/html/index.html', function (err, data) {
        if (err) throw err;
        var html = data.toString();
        var $ = cheerio.load(html);
        includeComponents($);
        ...
    }
}

append -> schließt den Inhalt in das div ein

ersetzen -> ersetzt das div

Sie können leicht weitere Verhaltensweisen hinzufügen, die demselben Design folgen

giroxiii
quelle

Fügen Sie eine weitere HTML-Datei in eine HTML-Datei ein

Antworten: