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

Utilisez includeHTML (kleinste js-lib: ~150 Zeilen)

Laden von HTML-Teilen über HTML-Tag (pure js)
Unterstützte Last: async/sync, beliebig tiefe rekursive Includes

Unterstützte Protokolle: http://, https://, file:///
Unterstützte Browser: IE 9+, FF, Chrome (und eventuell andere)

ANWENDUNG:

1.Einfügen includeHTML in den Head-Abschnitt (oder vor dem Body-Close-Tag) der HTML-Datei:

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

2. überall verwenden includeHTML als HTML-Tag:

<div data-src="header.html"></div>

Answer 2

Zum Einfügen des Inhalts der genannten Datei:

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

Answer 3

Keine dieser Lösungen entspricht meinen Bedürfnissen. Ich war auf der Suche nach etwas mehr PHP-ähnlichem. Diese Lösung ist meiner Meinung nach recht einfach und effizient.

include.js ->

void function(script) {
    const { searchParams } = new URL(script.src);
    fetch(searchParams.get('src')).then(r => r.text()).then(content => {
        script.outerHTML = content;
    });
}(document.currentScript);

index.html ->

<script src="/include.js?src=/header.html">
<main>
    Hello World!
</main>
<script src="/include.js?src=/footer.html">

Einfache Änderungen können vorgenommen werden, um include_once , require y require_once die alle je nach Tätigkeit nützlich sein können. Hier ist ein kurzes Beispiel dafür, wie das aussehen könnte.

include_once ->

var includedCache = includedCache || new Set();
void function(script) {
    const { searchParams } = new URL(script.src);
    const filePath = searchParams.get('src');
    if (!includedCache.has(filePath)) {
        fetch(filePath).then(r => r.text()).then(content => {
            includedCache.add(filePath);
            script.outerHTML = content;
        });
    }
}(document.currentScript);

Hoffentlich hilft das!

Answer 4

html5rocks.com hat ein sehr gutes Tutorial zu diesem Thema, und das ist vielleicht ein bisschen spät, aber ich selbst wusste nicht, dass es das gibt. w3schools hat auch eine Möglichkeit, dies mit ihrer neuen Bibliothek namens w3.js zu tun. Die Sache ist die, dass dies die Verwendung eines Webservers und eines HTTPRequest-Objekts erfordert. Sie können diese nicht lokal laden und auf Ihrem Rechner testen. Was Sie jedoch tun können, ist die Verwendung von Polyfills, die auf dem html5rocks-Link oben zur Verfügung gestellt werden, oder folgen Sie ihrem Tutorial. Mit ein wenig JS Magie, können Sie etwas wie dieses 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 in das gewünschte Link-Element geändert werden, wenn es bereits gesetzt ist), der Import gesetzt (sofern Sie ihn nicht bereits haben) und dann angehängt. Es wird dann von dort nehmen, dass und parsen die Datei in HTML, und dann an das gewünschte Element unter einem div anhängen. Dies alles kann nach Ihren Bedürfnissen geändert werden, vom anhängenden Element bis zum Link, den Sie verwenden. Ich hoffe, dass dies geholfen hat, es kann jetzt irrelevant sein, wenn neuere, schnellere Wege herausgekommen sind, ohne Bibliotheken und Frameworks wie jQuery oder W3.js zu verwenden.

UPDATE: Dabei wird ein Fehler ausgegeben, 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. (d.h. kein praktischer Nutzen)

Answer 5

Die Antwort von Athari (die erste!) war zu schlüssig! Sehr gut!

Aber wenn Sie es wünschen Übergeben Sie den Namen der Seite, die als URL-Parameter eingebunden werden soll hat dieser Beitrag eine sehr schöne Lösung, die in Kombination mit verwendet werden kann:

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

Es sieht also in etwa so aus:

Ihre URL:

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

En a.html Code wird jetzt:

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

Das hat bei mir sehr gut funktioniert! Ich hoffe, es hat geholfen :)