Echtes client-Seite HTML enthält

HTML unterstützt keine client-seitige Einbindung von anderen HTML wie bekommt man für C mit der #include Richtlinie.
Stattdessen werden die dominierenden Werkzeuge für die client-Seite HTML-Integration zu sein scheinen iframe, object, und vor allem die jQuery -.load.
Sehen dieser thread für Beispiele.

Leider keine dieser Methoden scheinen liefern genau die gleiche DOM würde man von einem #include.
Insbesondere iframe und object wickeln Sie das mitgelieferte content in Ihrer jeweiligen tags.
Auch die jQuery-Lösung vorgeschlagen, im Beispiel thread noch Ergebnisse, die in einem DOM mit einem extra div.

Betrachten Sie zum Beispiel die thread ' s jQuery-Lösung:

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>

Dadurch wird ein DOM, wo der Körper Teil aussieht:

<body> 
  <div id="includedContent">
    <p> This is my include file </p>
  </div>
</body>

aber eine wahre #include würde nicht die Verpackung div, so dass der DOM würde wie folgt Aussehen:

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

Irgendeine Idee, wie man eine client-Seite sind ohne die wrapper-tags?

EDIT: ich möchte nicht annehmen, Kenntnisse des umgebenden tags.
Zum Beispiel, in diesem Fall das umgebende tag ist body, aber es wird nicht in allen Fällen.

Warum nicht die Auswahl der body element? $("body").load("b.html");
HTML unterstützt client-seitige Integration seit frühen Tagen; browser-Anbieter einfach nicht umzusetzen, außer bei der Verarbeitung von XHTML als echtes XHTML (d.h., wie XML-Daten mit HTML-tags) – Sie können erklären, ein Unternehmen und die Verwendung einer entity-Referenz. Aber es gibt einen Grund, warum Browser-Anbieter nicht die Mühe: die Aufnahme erfolgt am besten auf server-Seite.

InformationsquelleAutor emchristiansen | 2013-09-20

Ich gehe davon aus, dass Ihr Körper hat, andere Elemente oder andere Aufnahme von tags wie diesen, in dem Fall können Sie die callback von load Auspacken selbst einmal das laden abgeschlossen ist.

 $(function(){
   $("#includedContent").load("b.html", function(){
        $(this).contents().unwrap();
   }); 
});

Können Sie isolieren diese callback-Funktion und verwendet Sie für keine anderen load dass Sie wäre die Durchführung über.

   function unWrapPlaceholder(){
     $(this).contents().unwrap();
   }


    $(function(){
       $("#includedContent").load("b.html", unWrapPlaceholder); 
       $("#headerContent").load("h.html", unWrapPlaceholder); 
       $("#footerContent").load("f.html", unWrapPlaceholder); 
    });

InformationsquelleAutor PSL

5

Schamlose einer Bibliothek, schrieb ich das lösen ähnliches problem.

https://github.com/LexmarkWeb/csi.js
```
<div data-include="/path/to/include.html"></div>
```
Den oben nehmen den Inhalt der /path/to/include.html und ersetzen Sie die div mit ihm.

InformationsquelleAutor Michael Marr
1

In Ihrem Beispiel haben Sie bereits definiert die wrapper-element in den DOM, bevor Sie jQuery verwenden Sie zum laden der Inhalte.
```
<body> 
  <div id="includedContent"></div>
</body> 
```
Wenn Sie mit jQuery auf .load() Sie angeben, wo Sie wollen, dass die Inhalte zu gehen. Es gibt keinen Grund, warum Sie nicht verwenden können,
```
$("body").load("b.html"); 
```
Die Ihnen
```
<body> 
  <p> This is my include file </p>
</body>
```
InformationsquelleAutor
1

Möchten Sie vielleicht wissen, wie jQuery.load() Werke, die dokumentiert ist hier.

Nun in jQuery wenn Sie wählen Sie ein Objekt und rufen Sie die load-Funktion, die Sie wollen, die das bestimmte Objekt zu ändern.

wie in deinem Beispiel

$("#includedContent").laden("b.html");

ausgewählten div-element mit der id includedContent umgewandelt werden. Und der code ist spezifisch zu tun. Last aus Last und nicht zählen. Da ajax ändern muss meist, Teile der Seiten anstatt die ganze Seite.

InformationsquelleAutor Srihari

Kombination der Ideen von den anderen Antworten:

$(function(){
    $("[data-include]").each(function(){
        var that = $(this);
        that.load(that.attr('data-include'), function(){
            that.contents().unwrap();
        }); 
    });
});

Nun können Sie ganz einfach importieren, deren syntax ähnlich zu anderen Sprachen, d.h.:

<div data-include="includes/topmenu.html"></div>

InformationsquelleAutor user2193606

0

WHATWG hat einen Vorschlag und die Diskussion über die Standardisierung von HTML enthält, die enthält auch links zu schon ein paar js-Bibliotheken https://github.com/whatwg/html/issues/2791

InformationsquelleAutor Malvoz

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.