Dołącz inny plik HTML do pliku HTML

624

Mam 2 pliki HTML, przypuszczam a.htmli b.html. W a.htmlChcę uwzględnić b.html.

W JSF mogę to zrobić w następujący sposób:

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

Oznacza to, że wewnątrz a.xhtmlpliku mogę dołączyć b.xhtml.

Jak możemy to zrobić w *.htmlpliku?

javascript html include Lolo
źródło

5

możliwy duplikat odpowiednika funkcji include () w HTML

Wesley Murch

32

NIE! jego 2 różne rzeczy!

Lolo

powiązane, ale dotyczy localhost: stackoverflow.com/questions/7542872/…

cregox

MarMarAba

Zobacz moduły HTML github.com/w3c/webcomponents/blob/gh-pages/propozycje/… i groups.google.com/a/chromium.org/forum/#!msg/blink-dev/… oraz github.com/w3c / webcomponents / blob / gh-stron / propozycje / ... i tło dyskusja na github.com/w3c/webcomponents/issues/645 a niektóre dyskusja problem w github.com/w3c/webcomponents/issues/783

sideshowbarker

685

Moim zdaniem najlepsze rozwiązanie wykorzystuje jQuery:

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>

Ta metoda jest prostym i czystym rozwiązaniem mojego problemu.

Dokumentacja jQuery .load()jest tutaj .

Lolo
źródło

5

Jaka jest różnica w robieniu tego właśnie „<script> $ („ # includedContent ”). Load („ b.html ”); </script>?

Rodrigo Ruiz

10

@RodrigoRuiz $(function(){})uruchomi się dopiero po zakończeniu ładowania dokumentu.

ProfK

8

Jeśli dołączony plik HTML ma dołączony CSS, może to popsuć styl strony.

Omar Jaafor,

6

Jestem dokładnie taki, jak wspomniałeś. Używam bootstrap i mam nadpisywania css dla B.html. Kiedy używam B.html w A.html, aby skończył jako nagłówek A.html, widzę, że css stracił swój priorytet i ma inny układ. Wszelkie rozwiązania tego ?.

Pavan Dittakavi

36

To wymaga serwera . Podczas korzystania z pliku lokalnego:

XMLHttpRequest cannot load file:///.../b.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Basj

154

Rozszerzając odpowiedź Lolo z góry, oto nieco więcej automatyzacji, jeśli musisz dołączyć wiele plików:

<script>
  $(function(){
    var includes = $('[data-include]');
    jQuery.each(includes, function(){
      var file = 'views/' + $(this).data('include') + '.html';
      $(this).load(file);
    });
  });
</script>

A potem dołączyć coś do html:

<div data-include="header"></div>
<div data-include="footer"></div>

Który obejmowałby plik views / header.html i views / footer.html

mhanisch
źródło

Bardzo przydatne. Czy istnieje sposób na przekazanie argumentu przez inny parametr danych, np. data-argumentPobranie go z dołączonego pliku?

Chris

@chris Możesz użyć parametrów GET, np.$("#postdiv").load('posts.php?name=Test&age=25');

Nam G VU

5

Mała sugestia - nie potrzebujesz class="include"- po prostu wybierz selektor jQueryvar includes = $('[data-include]');

jbyrd

nie działa na chrome z lokalnymi plikami „Żądania krzyżowe są obsługiwane tylko dla schematów protokołów:

htt

2

@ArtemBernatskyi Czy to pomaga, gdy zamiast tego uruchamiasz lokalny serwer? Oto prosty samouczek: developer.mozilla.org/en-US/docs/Learn/Common_questions/…

mhanisch 10.09.17

145

Moje rozwiązanie jest podobne do powyższego Lolo . Jednak wstawiam kod HTML za pomocą document.write JavaScript zamiast używać jQuery:

a.html:

<html> 
  <body>
  <h1>Put your HTML content before insertion of b.js.</h1>
      ...

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

      ...

  <p>And whatever content you want afterwards.</p>
  </body>
</html>

b.js:

document.write('\
\
    <h1>Add your HTML code here</h1>\
\
     <p>Notice however, that you have to escape LF's with a '\', just like\
        demonstrated in this code listing.\
    </p>\
\
');

Powodem, dla którego nie używam jQuery, jest to, że plik jQuery.js ma rozmiar ~ 90 KB i chcę, aby ilość danych do załadowania była jak najmniejsza.

Aby uzyskać poprawnie zamknięty kod JavaScript bez większego nakładu pracy, możesz użyć następującego polecenia sed:

sed 's/\\/\\\\/g;s/^.*$/&\\/g;s/'\''/\\'\''/g' b.html > escapedB.html

Lub po prostu użyj następującego przydatnego skryptu bash opublikowanego jako Gist na Github, który automatyzuje wszystkie niezbędne prace, konwertując b.htmlna b.js: https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6

Podziękowania dla Grega Minshalla za ulepszoną komendę sed, która także unika ukośników i pojedynczych cudzysłowów, czego moje oryginalne polecenie sed nie brało pod uwagę.

Alternatywnie dla przeglądarek obsługujących literały szablonów działa również:

b.js:

document.write(`

    <h1>Add your HTML code here</h1>

     <p>Notice, you do not have to escape LF's with a '\',
        like demonstrated in the above code listing.
    </p>

`);

Tafkadasoh
źródło

4

@TrevorHickey Tak, masz rację, to jest wada mojego rozwiązania i to nie jest zbyt eleganckie. Ponieważ jednak możesz wstawić „\” z prostym wyrażeniem regularnym na końcu każdej linii, działa to dla mnie najlepiej. Hmm ... może powinienem dodać do mojej odpowiedzi, jak wykonać wstawianie za pomocą wyrażenia regularnego ...

Tafkadasoh

2

Ojej, to brzydkie - nie, dziękuję. Wolę pisać mój HTML jako HTML. Nie obchodzi mnie, czy mogę użyć sed w wierszu poleceń - nie chcę polegać na tym za każdym razem, gdy zmieniam zawartość szablonu.

jbyrd

1

@Goodra Powinno działać na każdym HTML bez 'znaków w nim. Jeśli po prostu zrobić Znajdź / Zamień, aby zastąpić ` with \ `następnie znaleźć / zastąpić zastąpić 'z \'oraz nowych linii z` `nowych linii będzie działać dobrze.

wizzwizz4,

1

@ wizzwizz4: Dzięki Gregowi komenda sed unika teraz pojedynczych cudzysłowów i odwrotnych ukośników. Ponadto dodałem skrypt bash, który wykonuje całą pracę za Ciebie. :-)

Tafkadasoh

1

Możesz użyć `${var}\`\$

tylnych zwrotów

85

Kasa importuje HTML5 poprzez samouczek Html5rocks oraz w projekcie polimerowym

Na przykład:

<head>
  <link rel="import" href="/path/to/imports/stuff.html">
</head>

użytkownik1587439
źródło

27

Import HTML nie ma na celu bezpośredniego umieszczania treści na stronie. Kod w tej odpowiedzi tylko sprawia, stuff.htmldostępny jako szablon obrębie strony nadrzędnej, ale trzeba by użyć skryptów do tworzenia klonów jego DOM na stronie macierzystej tak, że są one widoczne dla użytkownika.

waldyrious

1

Instrukcje dotyczące wstawiania zawartości jednej strony HTML na drugą w html5rocks.com nie wydają się jeszcze działać w wielu przeglądarkach. Próbowałem w Operze 12.16 i Superbird w wersji 32.0.1700.7 (233448) bez efektu (na Xubuntu 15.04). Słyszałem, że nie działa w Firefoksie (z powodu błędu, który, mam nadzieję, został naprawiony) lub w wielu wersjach Chrome. Chociaż wygląda na to, że w przyszłości może to być idealne rozwiązanie, nie jest to rozwiązanie dla różnych przeglądarek.

Brōtsyorfuzthrāx

1

Najwyraźniej nie jest gotowy na koniec 2016 r. W FireFox (45.5.1 ESR). JS konsola mówi: TypeError: ... .import is undefined. MDN mówi: „Ta funkcja nie jest obecnie zaimplementowana w żadnej przeglądarce natywnie”. Czy ktoś wie, czy można zbudować FF za pomocą tej funkcji?

sphakka

3

Firefox nie będzie go obsługiwał. Aby ją włączyć, spróbuj ustawić „dom.webcomponents.enabled”. Działa tylko w Chrome i Operze na Androidzie z aktualizowanym widokiem sieci (start 4.4.3). Przeglądarki Apple nie obsługują tego. Wygląda na niezły pomysł na komponenty sieciowe, ale nie jest jeszcze szeroko wdrożony.

Maxim,

9

Aktualizacja pod koniec 2018 r .: import HTML jest z jakiegoś powodu przestarzały

V. Rubinetti,

60

Bezwstydna wtyczka biblioteki, którą napisałem, rozwiązuje ten problem.

https://github.com/LexmarkWeb/csi.js

<div data-include="/path/to/include.html"></div>

Powyższe weźmie zawartość /path/to/include.htmli zastąpi divją.

Michael Marr
źródło

4

Czy to oceni JavaScript, jeśli include.html ma go osadzone?

Seth

1

@Seth wydaje się, że nie. Zamierzam pobawić się z src i sprawdzić, czy dam radę. Podziękowania dla michael-marr

xandout

2

Znakomity!!!! Twoje wydaje się jedynym rozwiązaniem, które zastępuje znacznik div używany jako token dla miejsca wstawienia. Później dokładnie przestudiuję źródło !! :-)

kpollock

1

dzięki, że to działa, zawiera HTML / CSS, ale nie JavaScript z plików źródłowych. Musisz tylko dołączyć go ponownie, gdziekolwiek używasz <div data-include="/path/to/include.html"></div>. To narzędzie ułatwia w prosty sposób wykonanie prostej makiety wielostronicowej bez wtyczek.

Vincent Tang,

1

czy mogę używać tej biblioteki w dowolnej aplikacji? Mam na myśli, w jaki sposób można przypisać autorowi? W3School ma podobne rozwiązanie, z tą różnicą, że twój kod obsługuje rekurencyjne wywołanie przy ładowaniu okna .... w3schools.com/howto/tryit.asp?filename=tryhow_html_include_1

yeppe

43

Prosta po stronie serwera dyrektywa zawiera inny plik znaleziony w tym samym folderze wygląda następująco:

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

Webdesign7 Londyn
źródło

21

Musisz skonfigurować swój serwer do korzystania z SSI

lolo

7

Oto odniesienie do konfigurowania SSI dla twojego serwera: httpd.apache.org/docs/2.4/howto/ssi.html#configuring

shasi kanth

Może być warto spróbować , jak również

jimmyjudas

Włączenie SSI powoduje, że serwer WWW jest nieco wolniejszy (należy tego unikać do absolutnej konieczności).

Amit Verma

36

Nie potrzeba skryptów. Nie musisz robić żadnych wymyślnych rzeczy po stronie serwera (prawdopodobnie byłaby to lepsza opcja)

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

Ponieważ stare przeglądarki nie obsługują płynnie, należy dodać trochę css, aby to naprawić:

iframe[seamless] {
    border: none;
}

Należy pamiętać, że w przypadku przeglądarek, które nie obsługują płynnego działania, kliknięcie łącza w ramce iframe spowoduje przejście ramki do tego adresu URL, a nie do całego okna. Sposobem na obejście tego jest posiadanie wszystkich linków target="_parent", ponieważ obsługa przeglądarki jest „wystarczająco dobra”.

bjb568
źródło

7

na przykład wydaje się, że nie stosuje stylów css ze strony nadrzędnej.

Randy

5

@Randy So? Można to uznać za plus (szczególnie w przypadku treści generowanych przez użytkowników itp.). W każdym razie możesz łatwo dołączyć pliki css bez ponownego żądania z powodu buforowania.

bjb568

Odpowiedziałem na moje potrzeby odpowiedzi na to pytanie - jak dołączyć plik HTML do innego pliku HTML ...

Grimxn

2

To najlepsza odpowiedź BEZ JQuery lub skryptów. Ładne bjb568 dzięki!

DBS

12

seamlessAtrybut został usunięty z projektu HTML pochodzi. Nie używaj tego.

Mitja

33

Bardzo stare rozwiązanie I nie spełnił moje potrzeby, a następnie z powrotem, ale oto jak to zrobić zgodny ze standardami kodu:

<!--[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]-->

Aleksandar Vacić
źródło

9

Wydaje się, że <object>, <embed>a <iframe>wszystkie prace w tym, ale we wszystkich trzech przypadkach tworzą oddzielne dokumenty z własnych stylizacji i skryptów kontekstów (iframe szczególnie zawiera brzydkie granic i przewijania), aw przypadku jakichkolwiek powiązań domyślnie otwartych w nich, a nie na strona nadrzędna (chociaż można to zastąpić za pomocą target = "_ rodzic"). Ze wszystkich tych elementów iframe jest jedyną, która ma nadzieję na lepszą integrację poprzez seamlessatrybut HTML5 (wspomniany przez bjb568), ale nie jest jeszcze dobrze obsługiwana: caniuse.com/#feat=iframe-seamless

waldyrious

2

iframe-seamless został usunięty ze standardu HTML: github.com/whatwg/html/issues/331 . Więc komentarz @waldyrious nie jest już poprawny (czy chcesz zaktualizować swój komentarz?)

Tomáš Pospíšek

1

Dzięki za heads-up, @ TomášPospíšek. Nie mogę już edytować mojego komentarza, ale mam nadzieję, że twoja odpowiedź zapewni czytelnikom niezbędne zastrzeżenie. Żeby było jasne, ostatnie zdanie (o seamlessatrybucie) jest jedyną nieaktualną częścią - reszta nadal obowiązuje.

waldyrious

17

Alternatywnie, jeśli masz dostęp do pliku .htaccess na swoim serwerze, możesz dodać prostą dyrektywę, która pozwoli na interpretację php na plikach z rozszerzeniem .html.

RemoveHandler .html
AddType application/x-httpd-php .php .html

Teraz możesz użyć prostego skryptu php, aby dołączyć inne pliki, takie jak:

<?php include('b.html'); ?>

rtd1123
źródło

28

Tak, to bardzo zła rada. Pliki HTML są statyczne i są obsługiwane przez apache bardzo szybko. Jeśli dodasz wszystkie pliki HTML do parsera php tylko do plików inlcude, będziesz mieć wiele problemów z wydajnością na swoich serwerach. Sposób javascript (jQuery lub zwykły JS) nie są bardzo dobrymi rozwiązaniami, ale nadal są o wiele bardziej wydajne i mniej niebezpieczne niż ten.

Gfra54

@ Gfra54 Czy masz na myśli, że będziemy mieć problemy z wydajnością, jeśli użyjemy Apache tylko do tego i nie wykonamy żadnej pracy php na stronie? A może zwolni, jeśli użyję php i tej rzeczy razem?

user3459110

1

Przestroga: dodanie tych wierszy .htaccessmoże spowodować, że htmlstrony będą próbowały pobierać jako pliki zamiast wyświetlać je w przeglądarce. Najpierw przetestuj. Oświadczenie: To właśnie mi się przydarzyło, kiedy wypróbowałem powyższe rozwiązanie. Mój .htaccessbył pusty, z wyjątkiem dwóch linii. Zalecana ostrożność. loloZamiast tego wypróbuj rozwiązanie jQuery (poniżej).

cssyphus

człowieku komplikowałem się, mimo że robiłem to wcześniej. Dzięki za przypomnienie. W tym celu, którego potrzebuję, tak naprawdę nie wpływa na wydajność, więc jestem spoko.

Gman

Ha, ta miażdżąca wydajność odpowiedź jest niesamowitym przykładem nieszablonowego myślenia. Nigdy bym tego nie zasugerował, ale może ratownik, gdy potrzebujesz krótkiego młota php. :-)

moodboom

14

Poniższe działa, jeśli należy dołączyć zawartość HTML z jakiegoś pliku: Na przykład następujący wiersz będzie zawierał zawartość fragmentu_do_włączenia.html w miejscu, w którym występuje definicja OBIEKTU.

...text before...
<OBJECT data="file_to_include.html">
Warning: file_to_include.html could not be included.
</OBJECT>
...text after...

Odniesienie: http://www.w3.org/TR/WD-html40-970708/struct/includes.html#h-7.7.4

Fajny facet
źródło

2

Działa jak urok i jest to najczystsze rozwiązanie. To powinna być zaakceptowana odpowiedź.

vbocan,

Zgodzić się. Tylko jedna uwaga: nie próbuj robić samozamykającego się znacznika obiektu. Tekst po nim zostanie usunięty.

Sridhar Sarnobat

Wygląda na to, że tworzy nowy „#document”, który automatycznie zawiera nowe, zagnieżdżone znaczniki <html> i <body>. To nie zadziałało w moim celu; mój plik .html zawiera znaczniki <script src = "..." type = "text / javascript">; ale JS dostał nowe błędy referencyjne.

IAM_AL_X

12

Oto moje rozwiązanie na miejscu:

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

Rozwiń fragment kodu

Mustafa Burak Kalkan
źródło

1

woow, to jest prostsze

Arian saputra,

Naprawdę fajne i proste rozwiązanie, dzięki ^ ^

Remling

11

W w3.js obejmują takie prace:

<body>
<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>

Aby uzyskać odpowiedni opis, spójrz na to: https://www.w3schools.com/howto/howto_html_include.asp

Kaj Risberg
źródło

Jeśli chcesz wiedzieć, kiedy dokument został załadowany, możesz umieścić to na końcu dokumentu: <img src = "thisimagedoesnotexist.dmy" onerror = 'initDocument ()' style = 'display: none;'> Clever trick co?

Kaj Risberg,

2

nie działa z Google Chrome.

deepcell

9

To mi pomogło. Aby dodać blok kodu HTML od b.htmldo a.html, powinien on przejść do headtagu a.html:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Następnie w znaczniku body tworzony jest kontener z unikalnym identyfikatorem i blokiem javascript, aby załadować go b.htmldo kontenera w następujący sposób:

<div id="b-placeholder">

</div>

<script>
$(function(){
  $("#b-placeholder").load("b.html");
});
</script>

Ramtin
źródło

5

Czym różni się ta odpowiedź od przyjętej odpowiedzi na to pytanie?

Mohammad Usman

1

@MohammadUsman Tutaj kontener i kod javascript leżą w tagu body, a zaakceptowana odpowiedź umieszcza je w tagu head i pozostawiając kontener tylko w tagu body.

Ramtin

To nie jest warte nowej odpowiedzi ... to komentarz

Kennet Celeste

8

Wiem, że to bardzo stary post, więc niektóre metody nie były wówczas dostępne. Ale oto moje bardzo proste podejście (na podstawie odpowiedzi Lolo).

Opiera się na atrybutach data-* HTML5 i dlatego jest bardzo ogólny, ponieważ używa funkcji for-each jQuery, aby uzyskać każdą .class pasującą „load-html” i używa swojego odpowiedniego atrybutu „data-source” do załadowania treści:

<div class="container-fluid">
    <div class="load-html" id="NavigationMenu" data-source="header.html"></div>
    <div class="load-html" id="MainBody" data-source="body.html"></div>
    <div class="load-html" id="Footer" data-source="footer.html"></div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function () {
    $(".load-html").each(function () {
        $(this).load(this.dataset.source);
    });
});
</script>

Ben Mc
źródło

7

Możesz użyć wielopełniacza importów HTML ( https://www.html5rocks.com/en/tutorials/webcomponents/imports/ ) lub tego uproszczonego rozwiązania https://github.com/dsheiko/html-import

Na przykład na stronie importujesz taki blok HTML:

<link rel="html-import" href="./some-path/block.html" >

Blok może mieć własny import:

<link rel="html-import" href="./some-other-path/other-block.html" >

Importer zastępuje dyrektywę załadowanym kodem HTML, podobnie jak SSI

Te dyrektywy zostaną wyświetlone automatycznie, gdy tylko załadujesz ten mały skrypt JavaScript:

<script async src="./src/html-import.js"></script>

Przetworzy import, gdy DOM będzie gotowy automatycznie. Poza tym udostępnia interfejs API, którego można używać do ręcznego uruchamiania, uzyskiwania dzienników i tak dalej. Cieszyć się :)

Dmitry Sheiko
źródło

Gdzie powinna się znajdować linia skryptu w pliku HTML?

Andrew Truckle

Gdziekolwiek w BODY. Można umieścić rekurencyjnie w treści dołączonych plików

Dmitry Sheiko

Testowałeś to?

Bhikkhu Subhuti

Z pewnością tak. Używam go od lat. Dlaczego pytasz? Jakieś problemy?

Dmitry Sheiko

script async srcWydaje się, że „kluczem do tego jest” . Wypróbować to!

javadba

6

Większość rozwiązań działa, ale mają one problem z jquery :

Problem dotyczy następującego kodu $(document).ready(function () { alert($("#includedContent").text()); } nie ostrzega, zamiast ostrzegać o zawartej treści.

Piszę poniższy kod, w moim rozwiązaniu możesz uzyskać dostęp do zawartej treści $(document).ready funkcji:

(Klucz ładuje dołączoną zawartość synchronicznie).

index.htm :

<html>
    <head>
        <script src="jquery.js"></script>

        <script>
            (function ($) {
                $.include = function (url) {
                    $.ajax({
                        url: url,
                        async: false,
                        success: function (result) {
                            document.write(result);
                        }
                    });
                };
            }(jQuery));
        </script>

        <script>
            $(document).ready(function () {
                alert($("#test").text());
            });
        </script>
    </head>

    <body>
        <script>$.include("include.inc");</script>
    </body>

</html>

include.inc :

<div id="test">
    There is no issue between this solution and jquery.
</div>

jquery zawiera wtyczkę na github

Amir Saniyan
źródło

Podczas korzystania z tego, a następnie przeglądania źródła strony w przeglądarce widzisz tylko skrypt. Czy nie wpływa to na zdolność wyszukiwarek do analizowania witryny, ostatecznie niszcząc wszelkie działania SEO?

hmcclungiii

Tak, ta metoda niszczy wszelkie SEO :)

Amir Saniyan

Z drugiej strony każda metoda oparta na JavaScript robi to.

wizzwizz4,

5

Aby wstawić zawartość nazwanego pliku:

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

St.Eve
źródło

1

za pomocą nawiasów kątowych dla []: [! - # include virtual = "include_omega.htm" -]

St.Eve

4

Odpowiedź Athari (pierwsza!) Była zbyt rozstrzygająca! Bardzo dobre!

Ale jeśli chcesz przekazać nazwę strony, która ma zostać uwzględniona jako parametr adresu URL , ten post ma bardzo fajne rozwiązanie do zastosowania w połączeniu z:

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

Staje się więc coś takiego:

Twój adres URL:

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

A.html kod staje się teraz:

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

To działało dla mnie bardzo dobrze! Mam nadzieję, że pomogłem :)

Massa
źródło

Problem bezpieczeństwa, ponieważ możesz wysłać komuś ten link: www.yoursite.com/a.html?p=htttp://www.linktovir.us/here.html

JoostS

4

html5rocks.com ma bardzo dobry tutorial na ten temat i może to być trochę za późno, ale ja sam nie wiedziałem, że to istnieje. w3schools ma również na to sposób, używając swojej nowej biblioteki o nazwie w3.js. Chodzi o to, że wymaga to użycia serwera WWW i obiektu HTTPRequest. Nie można załadować ich lokalnie i przetestować na swoim komputerze. Możesz jednak użyć wypełnień podanych w linku html5rocks u góry lub postępować zgodnie z ich samouczkiem. Przy odrobinie magii JS możesz zrobić coś takiego:

 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);
 }

Spowoduje to utworzenie linku (Może zmienić się w pożądany element linku, jeśli jest już ustawiony), ustawienie importu (chyba że już go masz), a następnie dołączenie. Następnie stamtąd to weźmie i parsuje plik w HTML, a następnie doda go do żądanego elementu pod div. Można to wszystko zmienić, dopasowując do potrzeb - od elementu dołączającego do łącza, którego używasz. Mam nadzieję, że to pomogło, może teraz nie mieć znaczenia, jeśli pojawią się nowsze, szybsze sposoby bez użycia bibliotek i frameworków takich jak jQuery lub W3.js.

AKTUALIZACJA: Zgłasza błąd informujący, że lokalny import został zablokowany przez zasady CORS. Może potrzebować dostępu do głębokiej sieci, aby móc z niej korzystać ze względu na jej właściwości. (Oznacza brak praktycznego zastosowania)

SubLock69
źródło

4

Oto moje podejście przy użyciu Fetch API i funkcji asynchronicznej

<div class="js-component" data-name="header" data-ext="html"></div>
<div class="js-component" data-name="footer" data-ext="html"></div>

<script>
    const components = document.querySelectorAll('.js-component')

    const loadComponent = async c => {
        const { name, ext } = c.dataset
        const response = await fetch(`${name}.${ext}`)
        const html = await response.text()
        c.innerHTML = html
    }

    [...components].forEach(loadComponent)
</script>

barro32
źródło

3

Na razie nie ma bezpośredniego rozwiązania HTML dla tego zadania. Nawet import HTML (który jest na stałe w wersji roboczej ) nie zrobi tego, ponieważ Import! = Include i i tak będzie wymagana magia JS.
Niedawno napisałem do VanillaJS skrypt , który jest właśnie dla integracji HTML do HTML, bez żadnych komplikacji.

Po prostu umieść w swoim a.html

<link data-wi-src="b.html" />
<!-- ... and somewhere below is ref to the script ... -->
<script src="wm-html-include.js"> </script>

To jest open-sourcei może dać pomysł (mam nadzieję)

al. scvorets
źródło

3

Możesz to zrobić za pomocą biblioteki jQuery JavaScript:

HTML:

<div class="banner" title="banner.html"></div>

JS:

$(".banner").each(function(){
    var inc=$(this);
    $.get(inc.attr("title"), function(data){
        inc.replaceWith(data);
    });
});

Należy pamiętać, że banner.htmlpowinien znajdować się w tej samej domenie, w której znajdują się inne strony, w przeciwnym razie strony odrzucą banner.htmlplik z powodu zasad udostępniania zasobów między źródłami .

Pamiętaj też, że jeśli załadujesz treść za pomocą JavaScript, Google nie będzie w stanie zaindeksować jej, więc nie jest to dobra metoda ze względu na SEO.

AndrewL64
źródło

2

Czy próbowałeś wstrzyknięcia iFrame?

Wstrzykuje ramkę iFrame do dokumentu i usuwa się (tak powinno być w HTML DOM)

<iframe src="header.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>

pozdrowienia

Alban Lusitanae
źródło

1

Przyszedłem do tego tematu, szukając czegoś podobnego, ale nieco innego niż problem, który stwarza Lolo. Chciałem zbudować stronę HTML z menu alfabetycznym zawierającym łącza do innych stron, a każda z tych stron mogłaby istnieć lub nie, a kolejność, w jakiej zostały utworzone, może nie być alfabetyczna (ani nawet numeryczna). Podobnie jak Tafkadasoh, nie chciałem nadmuchać strony internetowej za pomocą jQuery. Po zbadaniu problemu i eksperymentowaniu przez kilka godzin, oto, co zadziałało dla mnie, z odpowiednimi uwagami:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/application/html; charset=iso-8859-1">
  <meta name="Author" content="me">
  <meta copyright="Copyright" content= "(C) 2013-present by me" />
  <title>Menu</title>

<script type="text/javascript">
<!--
var F000, F001, F002, F003, F004, F005, F006, F007, F008, F009,
    F010, F011, F012, F013, F014, F015, F016, F017, F018, F019;
var dat = new Array();
var form, script, write, str, tmp, dtno, indx, unde;

/*
The "F000" and similar variables need to exist/be-declared.
Each one will be associated with a different menu item,
so decide on how many items maximum you are likely to need,
when constructing that listing of them.  Here, there are 20.
*/


function initialize()
{ window.name="Menu";
  form = document.getElementById('MENU');
  for(indx=0; indx<20; indx++)
  { str = "00" + indx;
    tmp = str.length - 3;
    str = str.substr(tmp);
    script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = str + ".js";
    form.appendChild(script);
  }

/*
The for() loop constructs some <script> objects
and associates each one with a different simple file name,
starting with "000.js" and, here, going up to "019.js".
It won't matter which of those files exist or not.
However, for each menu item you want to display on this
page, you will need to ensure that its .js file does exist.

The short function below (inside HTML comment-block) is,
generically, what the content of each one of the .js files looks like:
<!--
function F000()
{ return ["Menu Item Name", "./URLofFile.htm", "Description string"];
}
-->

(Continuing the remarks in the main menu.htm file)
It happens that each call of the form.appendChild() function
will cause the specified .js script-file to be loaded at that time.
However, it takes a bit of time for the JavaScript in the file
to be fully integrated into the web page, so one thing that I tried,
but it didn't work, was to write an "onload" event handler.
The handler was apparently being called before the just-loaded
JavaScript had actually become accessible.

Note that the name of the function in the .js file is the same as one
of the the pre-defined variables like "F000".  When I tried to access
that function without declaring the variable, attempting to use an
"onload" event handler, the JavaScript debugger claimed that the item
was "not available".  This is not something that can be tested-for!
However, "undefined" IS something that CAN be tested-for.  Simply
declaring them to exist automatically makes all of them "undefined".
When the system finishes integrating a just-loaded .js script file,
the appropriate variable, like "F000", will become something other
than "undefined".  Thus it doesn't matter which .js files exist or
not, because we can simply test all the "F000"-type variables, and
ignore the ones that are "undefined".  More on that later.

The line below specifies a delay of 2 seconds, before any attempt
is made to access the scripts that were loaded.  That DOES give the
system enough time to fully integrate them into the web page.
(If you have a really long list of menu items, or expect the page
to be loaded by an old/slow computer, a longer delay may be needed.)
*/

  window.setTimeout("BuildMenu();", 2000);
  return;
}


//So here is the function that gets called after the 2-second delay  
function BuildMenu()
{ dtno = 0;    //index-counter for the "dat" array
  for(indx=0; indx<20; indx++)
  { str = "00" + indx;
    tmp = str.length - 3;
    str = "F" + str.substr(tmp);
    tmp = eval(str);
    if(tmp != unde) // "unde" is deliberately undefined, for this test
      dat[dtno++] = eval(str + "()");
  }

/*
The loop above simply tests each one of the "F000"-type variables, to
see if it is "undefined" or not.  Any actually-defined variable holds
a short function (from the ".js" script-file as previously indicated).
We call the function to get some data for one menu item, and put that
data into an array named "dat".

Below, the array is sorted alphabetically (the default), and the
"dtno" variable lets us know exactly how many menu items we will
be working with.  The loop that follows creates some "<span>" tags,
and the the "innerHTML" property of each one is set to become an
"anchor" or "<a>" tag, for a link to some other web page.  A description
and a "<br />" tag gets included for each link.  Finally, each new
<span> object is appended to the menu-page's "form" object, and thereby
ends up being inserted into the middle of the overall text on the page.
(For finer control of where you want to put text in a page, consider
placing something like this in the web page at an appropriate place,
as preparation:
<div id="InsertHere"></div>
You could then use document.getElementById("InsertHere") to get it into
a variable, for appending of <span> elements, the way a variable named
"form" was used in this example menu page.

Note: You don't have to specify the link in the same way I did
(the type of link specified here only works if JavaScript is enabled).
You are free to use the more-standard "<a>" tag with the "href"
property defined, if you wish.  But whichever way you go,
you need to make sure that any pages being linked actually exist!
*/

  dat.sort();
  for(indx=0; indx<dtno; indx++)
  { write = document.createElement('span');
    write.innerHTML = "<a onclick=\"window.open('" + dat[indx][1] +
                      "', 'Menu');\" style=\"color:#0000ff;" + 
                      "text-decoration:underline;cursor:pointer;\">" +
                      dat[indx][0] + "</a> " + dat[indx][2] + "<br />";
    form.appendChild(write);
  }
  return;
}

// -->
</script>
</head>

<body onload="initialize();" style="background-color:#a0a0a0; color:#000000; 

font-family:sans-serif; font-size:11pt;">
<h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;MENU
<noscript><br /><span style="color:#ff0000;">
Links here only work if<br />
your browser's JavaScript<br />
support is enabled.</span><br /></noscript></h2>
These are the menu items you currently have available:<br />
<br />
<form id="MENU" action="" onsubmit="return false;">
<!-- Yes, the <form> object starts out completely empty -->
</form>
Click any link, and enjoy it as much as you like.<br />
Then use your browser's BACK button to return to this Menu,<br />
so you can click a different link for a different thing.<br />
<br />
<br />
<small>This file (web page) Copyright (c) 2013-present by me</small>
</body>
</html>

vernonner3voltazim
źródło

1

Oto świetny artykuł. Możesz wdrożyć wspólną bibliotekę i po prostu użyć poniższego kodu, aby zaimportować dowolne pliki HTML w jednym wierszu.

<head>
   <link rel="import" href="warnings.html">
</head>

Możesz także wypróbować Google Polymer

Dhiral Pandya
źródło

6

„wystarczy użyć poniższego kodu, aby zaimportować dowolny plik HTML w jednym wierszu” jest dość nieuczciwe. Musisz następnie napisać JS, aby skorzystać z każdej zaimportowanej treści, więc ostatecznie będzie to więcej niż „jedna linia”.

skybondsor

1

Korzystanie z backticks ES6 ``: literały szablonu !

let nick = "Castor", name = "Moon", nuts = 1

more.innerHTML = `

<h1>Hello ${nick} ${name}!</h1>

You collected ${nuts} nuts so far!

<hr>

Double it and get ${nuts + nuts} nuts!!

`

<div id="more"></div>

Rozwiń fragment kodu

W ten sposób możemy dołączyć html bez kodowania cudzysłowów, dołączyć zmienne z DOM i tak dalej.

Jest to potężny silnik szablonów, możemy użyć osobnych plików js i użyć zdarzeń do załadowania zawartości w miejscu, a nawet oddzielić wszystko w kawałki i wywoływać na żądanie:

let inject = document.createElement('script');
inject.src= '//....com/template/panel45.js';
more.appendChild(inject);

https://caniuse.com/#feat=template-literals

NVRM
źródło

1

Dobry przykład - dlaczego nie ma pozytywnych opinii (do tej pory)?

javadba

Hej, masz rację, w 2018 r. Powyższe było wyraźnym znakiem prawdziwego dobrego RTFM;) javascriptDo tej pory w dużym stopniu zmiażdżyłem tę odznakę jako programista hobby.

NVRM

1

Aby rozwiązanie działało, musisz dołączyć plik csi.min.js, który możesz znaleźć tutaj .

Zgodnie z przykładem pokazanym na GitHub, aby użyć tej biblioteki, musisz dołączyć plik csi.js do nagłówka strony, a następnie musisz dodać atrybut data-include z jego wartością ustawioną do pliku, który chcesz dołączyć, do kontenera element.

Ukryj kod kopiowania

<html>
  <head>
    <script src="csi.js"></script>
  </head>
  <body>
    <div data-include="Test.html"></div>
  </body>
</html>

... mam nadzieję, że to pomoże.

Hamza Ali
źródło

0

PHP jest językiem skryptowym na poziomie serwera. Może robić wiele rzeczy, ale jednym z popularnych zastosowań jest umieszczanie dokumentów HTML na twoich stronach, podobnie jak SSI. Podobnie jak SSI, jest to technologia na poziomie serwera. Jeśli nie masz pewności, czy na swojej stronie działa funkcja PHP, skontaktuj się z dostawcą hostingu.

Oto prosty skrypt PHP, którego można użyć do włączenia fragmentu kodu HTML na dowolnej stronie internetowej z obsługą PHP:

Zapisz kod HTML wspólnych elementów witryny, aby oddzielić pliki. Na przykład sekcja nawigacji może być zapisana jako navigation.html lub navigation.php. Użyj następującego kodu PHP, aby dołączyć ten HTML na każdej stronie.

<?php require($DOCUMENT_ROOT . "navigation.php"); ?>

Użyj tego samego kodu na każdej stronie, na której chcesz dołączyć plik. Zmień nazwę podświetlonego pliku na nazwę i ścieżkę do pliku dołączanego.

Udara Pathirage
źródło

0

Jeśli używasz frameworka, takiego jak django / bootle, często dostarczają silnik szablonów. Załóżmy, że używasz butelki, a domyślnym silnikiem szablonów jest silnik SimpleTemplate . A poniżej znajduje się czysty plik HTML

$ cat footer.tpl
<hr> <footer>   <p>&copy; stackoverflow, inc 2015</p> </footer>

Możesz dołączyć footer.tpl do swojego głównego pliku, na przykład:

$ cat dashboard.tpl
%include footer

Poza tym możesz także przekazać parametr do swojego dashborard.tpl.

jaseywang
źródło

0

Na podstawie odpowiedzi https://stackoverflow.com/a/31837264/4360308 zaimplementowałem tę funkcjonalność z Nodejs (+ express + cheerio) w następujący sposób:

HTML (index.html)

<div class="include" data-include="componentX" data-method="append"></div>
<div class="include" data-include="componentX" data-method="replace"></div>

JS

function includeComponents($) {
    $('.include').each(function () {
        var file = 'view/html/component/' + $(this).data('include') + '.html';
        var dataComp = fs.readFileSync(file);
        var htmlComp = dataComp.toString();
        if ($(this).data('method') == "replace") {
            $(this).replaceWith(htmlComp);
        } else if ($(this).data('method') == "append") {
            $(this).append(htmlComp);
        }
    })
}

function foo(){
    fs.readFile('./view/html/index.html', function (err, data) {
        if (err) throw err;
        var html = data.toString();
        var $ = cheerio.load(html);
        includeComponents($);
        ...
    }
}

append -> włącza zawartość do div

replace -> zastępuje div

możesz łatwo dodać więcej zachowań według tego samego projektu

giroxiii
źródło

Dołącz inny plik HTML do pliku HTML

Odpowiedzi: