2017-03-13 3 views
-1

Ich habe 4 Dateien sagen wir a.html, b.html, c.html und d.html. Ich möchte, dass b.html c..html und d.html importiert hat. a.html benötigt b.html. Kann ich <link rel='import' href='/path/to/b.html'> in a.html importieren verwenden, dann in b.html haben die folgenden:Kann ich eine HTML-Datei über eine andere HTML-Importdatei importieren?

<link rel='import' href='/path/to/c.html> 
<link rel='import' href='/path/to/d.html> 
+0

Ja, Sie können. Hier ist eine [Demo] (http://plnkr.co/edit/TFJ6Rtg60mLeOfZP0SgM?p=preview) für genau dieses Szenario. – tony19

+0

@ tony19 Ich verwende Native Web Components kein Polymer. – Juwdohr

+0

@Juwdohr Ok. Die HTML-Importfunktion wird von Webkomponenten bereitgestellt, nicht von Polymer. Ich habe Polymer nur für seinen syntaktischen Zucker verwendet, um Komponenten zu erzeugen. – tony19

Antwort

1

Einschließlich einer HTML-Vorlage auf die Art und Weise ähnlich ist, dass wir ein Stylesheet enthalten, verwenden wir den Tag. Aber anstatt rel = Stylesheet zu verwenden, fügen wir das Link-Tag mit rel = import hinzu. Als Beispiel werde ich hier eine Vorlage namens template.html einfügen (Ich habe ein paar Zeilen Dummy-Inhalt hinzugefügt). <link rel="import" href="template.html">

Jetzt, wenn Sie die Webseite über die Chrome DevTools auf der Registerkarte Netzwerk sehen, können Sie sehen, dass der Browser (Chrome) die Vorlage.html lädt. Beachten Sie, dass der Inhalt der importierten Datei nicht sofort an die HTML-Hauptdatei angehängt wird. Wenn Sie die Haupt-HTML-Datei sehen, werden Sie im Moment nichts sehen.

Verwandte Themen