Częściowe renderowanie w HTML/JavaScript

Próbuję wyjaśnić, co chcę zrobić. Mam kilka plików HTML, a każdy z nich chcę częściowo renderować w innym pliku HTML, na przykład header.html i footer.html w celu obserwacji koncepcji DRY.Częściowe renderowanie w HTML/JavaScript

pliki HTML powinien wyglądać następująco:

<!--render header.html--> 
<div> 
    Content 
</div> 
<!--render footer.html-->

W jaki sposób można to zrobić?

Źródło

2012-07-22 Afshin Mehrabani

Czy chcesz dołączyć zawartość jednego pliku HTML w innym? – starbeamrainbowlabs

@starbeamrainbowlabs: Dokładnie, tak. –

Czy można używać PHP lub innego języka programowania po stronie serwera, czy też musi to być strona klienta? – starbeamrainbowlabs

Here's a link (pierwsza z Google, które mogę dodać), która wyjaśnia, jak to zrobić w różnych językach.

Należy również pamiętać, że niektóre IDE zajmują się tym za Ciebie. Dreamweaver jest jednym z przykładów; w ASP.NET istnieją strony wzorcowe; i tak dalej.

PHP:

<?php 
require($DOCUMENT_ROOT . "path to file/include-file.html"); 
?>

ASP:

<!--#include file="path to file/include-file.html"-->

JS:

JavaScript jest inny sposób to HTML w obrębie stron witryny . Ma to tę zaletę, że nie wymaga programowania na poziomie serwera na poziomie . Jest to jednak nieco bardziej skomplikowane niż na poziomie serwera.

Zapisz HTML dla wspólnych elementów witryny do JavaScriptu pliku. Każdy HTML zapisany w tym pliku musi zostać wydrukowany na ekranie za pomocą funkcji document.write.

Użyj znacznika skryptu, aby dołączyć plik JavaScript na swoich stronach.
< script type = "text/javascript" src = "ścieżka do pliku/include-file.js">

użyć tego samego kodu na każdej strony, że chcesz dołączyć plik.

UWAGA że wersja JS jest NIE idealny.
1. JS może być wyłączony lub niedostępny w przeglądarce.
2. Strona nie zostanie wyeksportowana/wczytana wszystkie naraz.

Co więcej, nie sądzę, że DRY naprawdę liczy na to. Rozważ użycie IDE, które utworzy dla ciebie szablony stron (na przykład Dreamweaver).

Jeśli jesteś na tyle odważny (i trochę staroświecki) i nie można korzystać z żadnej z powyższych, należy rozważyć użycie iframe o treści:

<html> 
    <body> 
     <div>my header</div> 
     <iframe src="mycontent.html" /> 
     <div>my fooder</div> 
    </body> 
</html>

ZASTRZEŻENIE
bym raczej odetnij moje ręce niż implementuj iframe lub podejście JS.Prosimy o dokładne rozważenie tego, czy w rzeczywistości to konieczne.

Źródło

2012-07-22 07:43:23

Próbuje dołączyć plik HTML w pliku HTML, jak korzystać z php na pliku rozszerzenia .html? – DannyG

@DannyG Moja odpowiedź pokazuje, jak można to osiągnąć w wielu technologiach. Chociaż nie zalecam, jeśli OP chce to zrobić tylko z plikami HTML, to opcje są JS lub IFRAME, jak zaznaczono w moim poście. Cytuj z sekcji JS: "niewymagające programowania na poziomie serwera" –

@DannyG JS może również służyć do wysyłania żądań XHR. –

Jeśli używasz programowania po stronie serwera, możesz użyć opcji include po stronie serwera, jeśli plik hosta jest plikiem HTML, możesz użyć tagu HTML SCRIPT, aby dołączyć pliki header.html i footer.html. Chociaż nie jestem pewien, co naprawdę masz na myśli, częściowo renderując plik HTML?

Źródło

2012-07-22 07:44:06 Shant

Nie używam żadnego języka po stronie serwera. Tylko JavaScript, HTML i jQuery. –

W takim przypadku można użyć znacznika SCRIPT, aby dołączyć plik HTML z atrybutem src mającym adres URL pliku HTML. Artykuł opublikowany przez flem jest bardzo pomocny. – Shant

Jeśli używasz zwykłego kodu HTML i JavaScript, możesz dołączyć jQuery i użyć żądania AJAX, aby wczytać rywalizację o inną stronę HTML na stronie głównej.

Wystarczy popatrzeć na jQuery 'load()' funkcja tutaj:

http://api.jquery.com/load/

Zakładając, że mam następujący kod HTML:

<div id="header"></div> 
<div id="content"></div> 
<div id="footer"></div>

swoją wykorzystanie mogłoby wyglądać tak:

$('#header').load('header.html'); 
$('#footer').load('footer.html');

Źródło

2012-07-22 07:46:47 dougajmcdonald

Powoduje to błąd żądania pochodzenia krzyżowego: -/ – ajbraus

To zrobi, jeśli próbujesz załadować zawartość z innej domeny (chyba że włączył CORS) – dougajmcdonald

... lub jeśli uruchamiasz to z lokalnego pliku html . – marsze

Jeśli szukasz tylko strony klienta lution, który jest html/js tylko powinieneś rzucić okiem na AngularJS i jego składnię ngInclude.

http://docs.angularjs.org/#!/api/ng.directive:ngInclude

Źródło

2012-07-22 07:48:41 Christoph

dzięki Christoph! "ng-include src" jest fajne, wydaje się, że fragment.js wykonuje tę samą pracę, ale powoduje błąd ... – dfang

Częściowe renderowanie w HTML/JavaScript

Odpowiedz

Powiązane problemy