Eine andere HTML-Datei in eine HTML-Datei einfügen

Question

Ich habe 2 HTML-Dateien, nehmen wir an a.html y b.html . Unter a.html Ich möchte Folgendes aufnehmen b.html .

In JSF kann ich das auch so machen:

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

Das bedeutet, dass im Inneren a.xhtml Datei, kann ich Folgendes einfügen b.xhtml .

Wie können wir das tun in *.html Datei?

Answer 1

Skripte sind nicht erforderlich. Keine Notwendigkeit, irgendwelche ausgefallenen Dinge serverseitig zu tun (obwohl das wahrscheinlich eine bessere Option wäre)

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

Da alte Browser keine nahtlose Darstellung unterstützen, sollten Sie etwas Css hinzufügen, um dies zu beheben:

iframe[seamless] {
    border: none;
}

Denken Sie daran, dass bei Browsern, die Seamless nicht unterstützen, beim Anklicken eines Links im Iframe die Rahmen zu dieser Url gehen, nicht zum gesamten Fenster. Eine Möglichkeit, das zu umgehen, ist, alle Links mit target="_parent" obwohl die Browserunterstützung "gut genug" ist.

Answer 2

Eine einfache serverseitige Include-Direktive zum Einbinden einer anderen Datei, die sich im selben Ordner befindet, sieht wie folgt aus:

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

Sie können auch versuchen:

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

Answer 3

A sehr alte Lösung Ich habe meine Bedürfnisse damals erfüllt, aber hier ist, wie man es zu tun Standards-konformen 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]-->

Answer 4

Hier ist meine Inline-Lösung:

(() => {
    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>

Answer 5

Das Folgende funktioniert, wenn HTML-Inhalte aus einer Datei eingefügt werden müssen: Die folgende Zeile bindet beispielsweise den Inhalt von piece_to_include.html an der Stelle ein, 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