Utwórz pliki nagłówka i stopki, które będą umieszczane na wielu stronach HTML

Question 1

Chcę utworzyć wspólne strony nagłówka i stopki, które będą zawarte na kilku stronach html.

Chciałbym używać javascript. Czy istnieje sposób, aby to zrobić, używając tylko html i JavaScript?

Chcę załadować stronę z nagłówkiem i stopką na innej stronie html.

Question 2

Możesz to osiągnąć za pomocą jquery .

Umieść ten kod w index.html

<html>
<head>
<title></title>
<script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous">
</script>
<script> 
$(function(){
  $("#header").load("header.html"); 
  $("#footer").load("footer.html"); 
});
</script> 
</head>
<body>
<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
</body>
</html>

i umieść ten kod w header.htmli footer.html, w tym samym miejscu coindex.html

<a href="http://www.google.com">click here for google</a>

Teraz, kiedy odwiedzasz index.html, powinieneś być w stanie kliknąć tagi linków.

Question 3

Dodaję wspólne części jako nagłówek i stopkę za pomocą dołączeń po stronie serwera . Nie jest potrzebny kod HTML ani JavaScript. Zamiast tego serwer sieciowy automatycznie dodaje dołączony kod, zanim zrobi cokolwiek innego.

Po prostu dodaj następujący wiersz, w którym chcesz dołączyć swój plik:

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

Question 4

Czy musisz używać struktury pliku html z JavaScriptem? Czy rozważałeś użycie PHP zamiast tego, aby móc używać prostego obiektu dołączania PHP?

Jeśli przekonwertujesz nazwy plików swoich stron .html na .php - wtedy na górze każdej ze stron .php możesz użyć jednej linii kodu, aby dołączyć zawartość z twojego header.php

<?php include('header.php'); ?>

Zrób to samo w stopce każdej strony, aby dołączyć zawartość z pliku footer.php

<?php include('footer.php'); ?>

Nie jest wymagany JavaScript / Jquery ani dodatkowe dołączone pliki.

Uwaga: Możesz także przekonwertować pliki .html na .php, korzystając z poniższego pliku w pliku .htaccess

# re-write html to php
RewriteRule ^(.*)\.html$ $1.php [L]
RewriteRule ^(.+)/$ http://%{HTTP_HOST}/$1 [R=301,L]


# re-write no extension to .php
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.php [NC,L]

Question 5

Próbowałem: Utwórz plik header.html jak

<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- JS -->
<script type="text/javascript" src="js/lib/jquery-1.11.1.min.js" ></script>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular-resource.min.js"></script>
<script type="text/javascript" src="js/lib/angular-route.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">

<title>Your application</title>

Teraz dołącz nagłówek.html do swoich stron HTML, takich jak:

<head>
   <script type="text/javascript" src="js/lib/jquery-1.11.1.min.js" ></script>
   <script> 
     $(function(){ $("head").load("header.html") });
   </script>
</head>

Działa doskonale.

Question 6

Możesz również wpisać: (load_essentials.js :)

document.getElementById("myHead").innerHTML =
	"<span id='headerText'>Title</span>"
	+ "<span id='headerSubtext'>Subtitle</span>";
document.getElementById("myNav").innerHTML =
	"<ul id='navLinks'>"
	+ "<li><a href='index.html'>Home</a></li>"
	+ "<li><a href='about.html'>About</a>"
	+ "<li><a href='donate.html'>Donate</a></li>"
	+ "</ul>";
document.getElementById("myFooter").innerHTML =
	"<p id='copyright'>Copyright &copy; " + new Date().getFullYear() + " You. All"
	+ " rights reserved.</p>"
	+ "<p id='credits'>Layout by You</p>"
	+ "<p id='contact'><a href='mailto:[email protected]'>Contact Us</a> / "
	+ "<a href='mailto:[email protected]'>Report a problem.</a></p>";

<!--HTML-->
<header id="myHead"></header>
<nav id="myNav"></nav>
Content
<footer id="myFooter"></footer>

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

Rozwiń fragment

Question 7

Pracowałem w C # / Razor, a ponieważ nie mam konfiguracji IIS na moim domowym laptopie, szukałem rozwiązania javascript do ładowania widoków podczas tworzenia statycznych znaczników dla naszego projektu.

Natknąłem się na stronę internetową wyjaśniającą metody „porzucania jquery”, która demonstruje metodę w witrynie, która robi dokładnie to, czego szukasz, w prostym javascript Jane ( odsyłacz na dole postu ). Pamiętaj, aby zbadać wszelkie luki w zabezpieczeniach i problemy ze zgodnością, jeśli zamierzasz używać tego w środowisku produkcyjnym. Nie jestem, więc sam nigdy nie zaglądałem do tego.

Funkcja JS

var getURL = function (url, success, error) {
    if (!window.XMLHttpRequest) return;
    var request = new XMLHttpRequest();
    request.onreadystatechange = function () {
        if (request.readyState === 4) {
            if (request.status !== 200) {
                if (error && typeof error === 'function') {
                    error(request.responseText, request);
                }
                return;
            }
            if (success && typeof success === 'function') {
                success(request.responseText, request);
            }
        }
    };
    request.open('GET', url);
    request.send();
};

Pobierz zawartość

getURL(
    '/views/header.html',
    function (data) {
        var el = document.createElement(el);
        el.innerHTML = data;
        var fetch = el.querySelector('#new-header');
        var embed = document.querySelector('#header');
        if (!fetch || !embed) return;
        embed.innerHTML = fetch.innerHTML;

    }
);

index.html

<!-- This element will be replaced with #new-header -->
<div id="header"></div>

views / header.html

<!-- This element will replace #header -->
<header id="new-header"></header>

Źródło nie jest moje własne, tylko się do niego odwołuję, ponieważ jest to dobre, waniliowe rozwiązanie javascript dla OP. Oryginalny kod znajduje się tutaj: http://gomakethings.com/ditching-jquery#get-html-from-another-page

Question 8

Myślę, że odpowiedzi na to pytanie są zbyt stare ... obecnie niektóre przeglądarki na komputery stacjonarne i urządzenia mobilne obsługują szablony HTML do tego.

Zbudowałem mały przykład:

Testowane OK w Chrome 61.0, Opera 48.0, Opera Neon 1.0, przeglądarce Android 6.0, Chrome Mobile 61.0 i przeglądarce Adblocker 54.0
Testowane KO w Safari 10.1, Firefox 56.0, Edge 38.14 i IE 11

Więcej informacji o zgodności na canisue.com

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Template Example</title>

    <link rel="stylesheet" href="styles.css">
    <link rel="import" href="autoload-template.html">
</head>
<body>

<div class="template-container">1</div>
<div class="template-container">2</div>
<div class="template-container">3</div>
<div class="template-container">4</div>
<div class="template-container">5</div>

</body>
</html>

autoload-template.html

<span id="template-content">
    Template Hello World!
</span>

<script>
    var me = document.currentScript.ownerDocument;
    var post = me.querySelector( '#template-content' );

    var container = document.querySelectorAll( '.template-container' );

    //alert( container.length );
    for(i=0; i<container.length ; i++) {
        container[i].appendChild( post.cloneNode( true ) );
    }
</script>

styles.css

#template-content {
    color: red;
}

.template-container {
    background-color: yellow;
    color: blue;
}

Więcej przykładów znajdziesz w tym poście HTML5 Rocks

Question 9

Aloha z 2018 roku. Niestety nie mam nic fajnego ani futurystycznego, którym mógłbym się z Wami podzielić.

Chciałem jednak zwrócić uwagę tym, którzy skomentowali, że load()metoda jQuery nie działa obecnie, prawdopodobnie próbują użyć tej metody z plikami lokalnymi bez uruchamiania lokalnego serwera WWW. Czyniąc to rzuci wyżej wymienionego błędu „pochodzenie krzyż”, który określa, że pochodzenie krzyż zażąda takiego jak wykonane metodą obciążenia są obsługiwane tylko dla systemów protokołów, takich jak http, datalub https. (Zakładam, że nie wykonujesz rzeczywistego żądania między źródłami, tj. Plik header.html znajduje się w tej samej domenie, co strona, z której go żądasz)

Tak więc, jeśli zaakceptowana powyżej odpowiedź nie działa dla Ciebie, upewnij się, że używasz serwera WWW. Najszybszym i najłatwiejszym sposobem na zrobienie tego, jeśli się spieszysz (i używasz komputera Mac z preinstalowanym Pythonem), byłoby uruchomienie prostego serwera http w języku Python. Można zobaczyć, jak łatwo jest to zrobić tutaj .

Mam nadzieję, że to pomoże!

Question 10

Możliwe jest również ładowanie skryptów i linków do nagłówka. Dodam to jeden z powyższych przykładów ...

<!--load_essentials.js-->
document.write('<link rel="stylesheet" type="text/css" href="css/style.css" />');
document.write('<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />');
document.write('<script src="js/jquery.js" type="text/javascript"></script>');

document.getElementById("myHead").innerHTML =
"<span id='headerText'>Title</span>"
+ "<span id='headerSubtext'>Subtitle</span>";
document.getElementById("myNav").innerHTML =
"<ul id='navLinks'>"
+ "<li><a href='index.html'>Home</a></li>"
+ "<li><a href='about.html'>About</a>"
+ "<li><a href='donate.html'>Donate</a></li>"
+ "</ul>";
document.getElementById("myFooter").innerHTML =
"<p id='copyright'>Copyright &copy; " + new Date().getFullYear() + " You. All"
+ " rights reserved.</p>"
+ "<p id='credits'>Layout by You</p>"
+ "<p id='contact'><a href='mailto:[email protected]'>Contact Us</a> / "
+ "<a href='mailto:[email protected]'>Report a problem.</a></p>";

<!--HTML-->
<header id="myHead"></header>
<nav id="myNav"></nav>
Content
<footer id="myFooter"></footer>

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

Question 11

innym podejściem dostępnym od czasu, gdy zadano to pytanie po raz pierwszy, jest użycie reactrb-express (patrz http://reactrb.org ). Pozwoli to na skryptowanie w języku Ruby po stronie klienta, zastępując kod HTML komponentami reagującymi napisanymi w języku Ruby.

Question 12

Zapisz kod HTML, który chcesz dołączyć do pliku .html:

Content.html

<a href="howto_google_maps.asp">Google Maps</a><br>
<a href="howto_css_animate_buttons.asp">Animated Buttons</a><br>
<a href="howto_css_modals.asp">Modal Boxes</a><br>
<a href="howto_js_animate.asp">Animations</a><br>
<a href="howto_js_progressbar.asp">Progress Bars</a><br>
<a href="howto_css_dropdown.asp">Hover Dropdowns</a><br>
<a href="howto_js_dropdown.asp">Click Dropdowns</a><br>
<a href="howto_css_table_responsive.asp">Responsive Tables</a><br>

Dołącz kod HTML

Dołączanie kodu HTML odbywa się za pomocą atrybutu w3-include-html :

Przykład

    <div w3-include-html="content.html"></div>

Dodaj JavaScript

Dołączanie HTML jest wykonywane przez JavaScript.

    <script>
    function includeHTML() {
      var z, i, elmnt, file, xhttp;
      /*loop through a collection of all HTML elements:*/
      z = document.getElementsByTagName("*");
      for (i = 0; i < z.length; i++) {
        elmnt = z[i];
        /*search for elements with a certain atrribute:*/
        file = elmnt.getAttribute("w3-include-html");
        if (file) {
          /*make an HTTP request using the attribute value as the file name:*/
          xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() {
            if (this.readyState == 4) {
              if (this.status == 200) {elmnt.innerHTML = this.responseText;}
              if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
              /*remove the attribute, and call this function once more:*/
              elmnt.removeAttribute("w3-include-html");
              includeHTML();
            }
          } 
          xhttp.open("GET", file, true);
          xhttp.send();
          /*exit the function:*/
          return;
        }
      }
    }
    </script>

Wywołaj includeHTML () u dołu strony:

Przykład

<!DOCTYPE html>
<html>
<script>
function includeHTML() {
  var z, i, elmnt, file, xhttp;
  /*loop through a collection of all HTML elements:*/
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /*make an HTTP request using the attribute value as the file name:*/
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
          /*remove the attribute, and call this function once more:*/
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      }      
      xhttp.open("GET", file, true);
      xhttp.send();
      /*exit the function:*/
      return;
    }
  }
};
</script>
<body>

<div w3-include-html="h1.html"></div> 
<div w3-include-html="content.html"></div> 

<script>
includeHTML();
</script>

</body>
</html>

Answer 1

148

Chcę utworzyć wspólne strony nagłówka i stopki, które będą zawarte na kilku stronach html.

Chciałbym używać javascript. Czy istnieje sposób, aby to zrobić, używając tylko html i JavaScript?

Chcę załadować stronę z nagłówkiem i stopką na innej stronie html.

javascript jquery html css Prasanth AR
źródło

1

Szukasz ajax ... $ ('. MyElement) .load (' urltopage.html '); spowoduje to załadowanie zawartości urltopage.html w .myElement

Salketer

stackoverflow.com/a/8592403/896341

Stefan

Answer 2

1

Szukasz ajax ... $ ('. MyElement) .load (' urltopage.html '); spowoduje to załadowanie zawartości urltopage.html w .myElement

Salketer

Answer 3

stackoverflow.com/a/8592403/896341

Stefan

Answer 4

202

Możesz to osiągnąć za pomocą jquery .

Umieść ten kod w index.html

<html>
<head>
<title></title>
<script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous">
</script>
<script> 
$(function(){
  $("#header").load("header.html"); 
  $("#footer").load("footer.html"); 
});
</script> 
</head>
<body>
<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
</body>
</html>

i umieść ten kod w header.htmli footer.html, w tym samym miejscu coindex.html

<a href="http://www.google.com">click here for google</a>

Teraz, kiedy odwiedzasz index.html, powinieneś być w stanie kliknąć tagi linków.

Hariprasad Prolanx
źródło

Tak. cała strona powinna mieć

taką

19

load lub inna funkcja, która importuje lub local filenie działa w nowej wersji przeglądarki Google Chrome lub IE, powód: bezpieczeństwo!

Sinac

9

Czasami zastanawiam się, jak ludzie mogą nawet oddychać bez jQuery. A może jest .breathe(in)i .breathe(out)już? Każdy język skryptowy jest tutaj czystą przesadą.

The Conspiracy

6

Ciągle się dostaję,

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

gdy uruchamiam w Chrome

digiwebguy

1

Wymagane jest uruchomienie kodu na serwerze. Co oznacza, że adres URL musi wyglądać jak „http: // .....”.

Patriotic

Answer 5

Tak. cała strona powinna mieć

taką

Answer 6

19

load lub inna funkcja, która importuje lub local filenie działa w nowej wersji przeglądarki Google Chrome lub IE, powód: bezpieczeństwo!

Sinac

Answer 7

9

Czasami zastanawiam się, jak ludzie mogą nawet oddychać bez jQuery. A może jest .breathe(in)i .breathe(out)już? Każdy język skryptowy jest tutaj czystą przesadą.

The Conspiracy

Answer 8

6

Ciągle się dostaję,

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

gdy uruchamiam w Chrome

digiwebguy

Answer 9

1

Wymagane jest uruchomienie kodu na serwerze. Co oznacza, że adres URL musi wyglądać jak „http: // .....”.

Patriotic

Answer 10

38

Dodaję wspólne części jako nagłówek i stopkę za pomocą dołączeń po stronie serwera . Nie jest potrzebny kod HTML ani JavaScript. Zamiast tego serwer sieciowy automatycznie dodaje dołączony kod, zanim zrobi cokolwiek innego.

Po prostu dodaj następujący wiersz, w którym chcesz dołączyć swój plik:

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

Konspiracja
źródło

8

Lubię ten staroświecki sposób. W rzeczywistości wydaje się, że użycie skryptu do wykonania tak prostej czynności nie przynosi zbyt wielu korzyści.

Jenna Leaf

3

W rzeczywistości dołączanie plików za pomocą skryptu ma poważne wady: utrudnia działanie, ponieważ klient musi pobrać stronę główną, załadować DOM, uruchomić skrypt i dopiero wtedy może pobrać dołączone pliki, co wymaga dodatkowego żądania serwera na dołączony plik . W przypadku plików korzystających z opcji Server Side Includes wszystkie elementy podczas pierwszego żądania serwera nie są wymagane żadne działania klienta.

The Conspiracy

SSI wymaga użycia rozszerzenie pliku: .shtml, .stm, .shtm. Działa w Apache, LiteSpeed, nginx, lighttpd i IIS.

ubershmekel

@ubershmekel Jak powiedziałeś, odpowiednie serwery internetowe obsługują SSI. Rozszerzenie pliku nie jest ograniczone do .shtml, .stmi .shtm: W IIS, wszystkie pliki analizowany może zawierać SSI, np .aspx. Jeśli pracujesz z PHP, musisz zamiast tego użyć PHP includelub virtualpolecenia, aby osiągnąć ten sam wynik.

The Conspiracy

Answer 11

8

Lubię ten staroświecki sposób. W rzeczywistości wydaje się, że użycie skryptu do wykonania tak prostej czynności nie przynosi zbyt wielu korzyści.

Jenna Leaf

Answer 12

3

W rzeczywistości dołączanie plików za pomocą skryptu ma poważne wady: utrudnia działanie, ponieważ klient musi pobrać stronę główną, załadować DOM, uruchomić skrypt i dopiero wtedy może pobrać dołączone pliki, co wymaga dodatkowego żądania serwera na dołączony plik . W przypadku plików korzystających z opcji Server Side Includes wszystkie elementy podczas pierwszego żądania serwera nie są wymagane żadne działania klienta.

The Conspiracy

Answer 13

SSI wymaga użycia rozszerzenie pliku: .shtml, .stm, .shtm. Działa w Apache, LiteSpeed, nginx, lighttpd i IIS.

ubershmekel

Answer 14

@ubershmekel Jak powiedziałeś, odpowiednie serwery internetowe obsługują SSI. Rozszerzenie pliku nie jest ograniczone do .shtml, .stmi .shtm: W IIS, wszystkie pliki analizowany może zawierać SSI, np .aspx. Jeśli pracujesz z PHP, musisz zamiast tego użyć PHP includelub virtualpolecenia, aby osiągnąć ten sam wynik.

The Conspiracy

Answer 15

Czy musisz używać struktury pliku html z JavaScriptem? Czy rozważałeś użycie PHP zamiast tego, aby móc używać prostego obiektu dołączania PHP?

Jeśli przekonwertujesz nazwy plików swoich stron .html na .php - wtedy na górze każdej ze stron .php możesz użyć jednej linii kodu, aby dołączyć zawartość z twojego header.php

<?php include('header.php'); ?>

Zrób to samo w stopce każdej strony, aby dołączyć zawartość z pliku footer.php

<?php include('footer.php'); ?>

Nie jest wymagany JavaScript / Jquery ani dodatkowe dołączone pliki.

Uwaga: Możesz także przekonwertować pliki .html na .php, korzystając z poniższego pliku w pliku .htaccess

# re-write html to php
RewriteRule ^(.*)\.html$ $1.php [L]
RewriteRule ^(.+)/$ http://%{HTTP_HOST}/$1 [R=301,L]


# re-write no extension to .php
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.php [NC,L]

Answer 16

2

@ Justin808 - OP nie wspomina nic o lokalnej instalacji hostowanej, więc przypuszczałem, że mówił o plikach na serwerze.

Sol

Answer 17

1

@Sol Jednak OP DID wyraźnie wspomniał o chęci korzystania z JavaScript, więc Twoja odpowiedź nie jest na temat. Tworzenie stron internetowych z pełnym stosem szybko odchodzi od używania PHP, Node.js zapewnia wszystkie równoważne funkcje i wymaga tylko obsługi JavaScript. TL; DR proszę odpowiedzieć na zadane pytania. OP chciał mieć rozwiązanie JS, więc niewłaściwe jest oferowanie mu rozwiązania PHP, Ruby, Python, C ++ lub jakiegokolwiek innego języka.

Zach

Answer 18

Próbowałem: Utwórz plik header.html jak

<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- JS -->
<script type="text/javascript" src="js/lib/jquery-1.11.1.min.js" ></script>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular-resource.min.js"></script>
<script type="text/javascript" src="js/lib/angular-route.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">

<title>Your application</title>

Teraz dołącz nagłówek.html do swoich stron HTML, takich jak:

<head>
   <script type="text/javascript" src="js/lib/jquery-1.11.1.min.js" ></script>
   <script> 
     $(function(){ $("head").load("header.html") });
   </script>
</head>

Działa doskonale.

Answer 19

1

Niezłe rozwiązanie, ale myślę, że spowodowałoby to dwukrotne załadowanie frameworka jquery, raz w celu załadowania strony początkowej, a po drugie podczas wykonywania metody .load () - ponieważ strona docelowa zawiera również jquery.

Delali

Answer 20

Możesz również wpisać: (load_essentials.js :)

document.getElementById("myHead").innerHTML =
	"<span id='headerText'>Title</span>"
	+ "<span id='headerSubtext'>Subtitle</span>";
document.getElementById("myNav").innerHTML =
	"<ul id='navLinks'>"
	+ "<li><a href='index.html'>Home</a></li>"
	+ "<li><a href='about.html'>About</a>"
	+ "<li><a href='donate.html'>Donate</a></li>"
	+ "</ul>";
document.getElementById("myFooter").innerHTML =
	"<p id='copyright'>Copyright &copy; " + new Date().getFullYear() + " You. All"
	+ " rights reserved.</p>"
	+ "<p id='credits'>Layout by You</p>"
	+ "<p id='contact'><a href='mailto:[email protected]'>Contact Us</a> / "
	+ "<a href='mailto:[email protected]'>Report a problem.</a></p>";

<!--HTML-->
<header id="myHead"></header>
<nav id="myNav"></nav>
Content
<footer id="myFooter"></footer>

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

Rozwiń fragment

Answer 21

Pracowałem w C # / Razor, a ponieważ nie mam konfiguracji IIS na moim domowym laptopie, szukałem rozwiązania javascript do ładowania widoków podczas tworzenia statycznych znaczników dla naszego projektu.

Natknąłem się na stronę internetową wyjaśniającą metody „porzucania jquery”, która demonstruje metodę w witrynie, która robi dokładnie to, czego szukasz, w prostym javascript Jane ( odsyłacz na dole postu ). Pamiętaj, aby zbadać wszelkie luki w zabezpieczeniach i problemy ze zgodnością, jeśli zamierzasz używać tego w środowisku produkcyjnym. Nie jestem, więc sam nigdy nie zaglądałem do tego.

Funkcja JS

var getURL = function (url, success, error) {
    if (!window.XMLHttpRequest) return;
    var request = new XMLHttpRequest();
    request.onreadystatechange = function () {
        if (request.readyState === 4) {
            if (request.status !== 200) {
                if (error && typeof error === 'function') {
                    error(request.responseText, request);
                }
                return;
            }
            if (success && typeof success === 'function') {
                success(request.responseText, request);
            }
        }
    };
    request.open('GET', url);
    request.send();
};

Pobierz zawartość

getURL(
    '/views/header.html',
    function (data) {
        var el = document.createElement(el);
        el.innerHTML = data;
        var fetch = el.querySelector('#new-header');
        var embed = document.querySelector('#header');
        if (!fetch || !embed) return;
        embed.innerHTML = fetch.innerHTML;

    }
);

index.html

<!-- This element will be replaced with #new-header -->
<div id="header"></div>

views / header.html

<!-- This element will replace #header -->
<header id="new-header"></header>

Źródło nie jest moje własne, tylko się do niego odwołuję, ponieważ jest to dobre, waniliowe rozwiązanie javascript dla OP. Oryginalny kod znajduje się tutaj: http://gomakethings.com/ditching-jquery#get-html-from-another-page

Answer 22

Dobre rozwiązanie. Wolę ten od używania jquery.

Delali

Answer 23

Myślę, że odpowiedzi na to pytanie są zbyt stare ... obecnie niektóre przeglądarki na komputery stacjonarne i urządzenia mobilne obsługują szablony HTML do tego.

Zbudowałem mały przykład:

Testowane OK w Chrome 61.0, Opera 48.0, Opera Neon 1.0, przeglądarce Android 6.0, Chrome Mobile 61.0 i przeglądarce Adblocker 54.0
Testowane KO w Safari 10.1, Firefox 56.0, Edge 38.14 i IE 11

Więcej informacji o zgodności na canisue.com

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Template Example</title>

    <link rel="stylesheet" href="styles.css">
    <link rel="import" href="autoload-template.html">
</head>
<body>

<div class="template-container">1</div>
<div class="template-container">2</div>
<div class="template-container">3</div>
<div class="template-container">4</div>
<div class="template-container">5</div>

</body>
</html>

autoload-template.html

<span id="template-content">
    Template Hello World!
</span>

<script>
    var me = document.currentScript.ownerDocument;
    var post = me.querySelector( '#template-content' );

    var container = document.querySelectorAll( '.template-container' );

    //alert( container.length );
    for(i=0; i<container.length ; i++) {
        container[i].appendChild( post.cloneNode( true ) );
    }
</script>

styles.css

#template-content {
    color: red;
}

.template-container {
    background-color: yellow;
    color: blue;
}

Więcej przykładów znajdziesz w tym poście HTML5 Rocks

Answer 24

5

Import HTML jest obecnie przestarzały.

Jonathan Sharman

Answer 25

Aloha z 2018 roku. Niestety nie mam nic fajnego ani futurystycznego, którym mógłbym się z Wami podzielić.

Chciałem jednak zwrócić uwagę tym, którzy skomentowali, że load()metoda jQuery nie działa obecnie, prawdopodobnie próbują użyć tej metody z plikami lokalnymi bez uruchamiania lokalnego serwera WWW. Czyniąc to rzuci wyżej wymienionego błędu „pochodzenie krzyż”, który określa, że pochodzenie krzyż zażąda takiego jak wykonane metodą obciążenia są obsługiwane tylko dla systemów protokołów, takich jak http, datalub https. (Zakładam, że nie wykonujesz rzeczywistego żądania między źródłami, tj. Plik header.html znajduje się w tej samej domenie, co strona, z której go żądasz)

Tak więc, jeśli zaakceptowana powyżej odpowiedź nie działa dla Ciebie, upewnij się, że używasz serwera WWW. Najszybszym i najłatwiejszym sposobem na zrobienie tego, jeśli się spieszysz (i używasz komputera Mac z preinstalowanym Pythonem), byłoby uruchomienie prostego serwera http w języku Python. Można zobaczyć, jak łatwo jest to zrobić tutaj .

Mam nadzieję, że to pomoże!

Answer 26

Korzystanie z serwera WWW jednak mija się z celem, przynajmniej dla mnie powodem używania Javascript jest tylko ułatwienie.

Konrad Höffner

Answer 27

Możliwe jest również ładowanie skryptów i linków do nagłówka. Dodam to jeden z powyższych przykładów ...

<!--load_essentials.js-->
document.write('<link rel="stylesheet" type="text/css" href="css/style.css" />');
document.write('<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />');
document.write('<script src="js/jquery.js" type="text/javascript"></script>');

document.getElementById("myHead").innerHTML =
"<span id='headerText'>Title</span>"
+ "<span id='headerSubtext'>Subtitle</span>";
document.getElementById("myNav").innerHTML =
"<ul id='navLinks'>"
+ "<li><a href='index.html'>Home</a></li>"
+ "<li><a href='about.html'>About</a>"
+ "<li><a href='donate.html'>Donate</a></li>"
+ "</ul>";
document.getElementById("myFooter").innerHTML =
"<p id='copyright'>Copyright &copy; " + new Date().getFullYear() + " You. All"
+ " rights reserved.</p>"
+ "<p id='credits'>Layout by You</p>"
+ "<p id='contact'><a href='mailto:[email protected]'>Contact Us</a> / "
+ "<a href='mailto:[email protected]'>Report a problem.</a></p>";

<!--HTML-->
<header id="myHead"></header>
<nav id="myNav"></nav>
Content
<footer id="myFooter"></footer>

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

Answer 28

0

innym podejściem dostępnym od czasu, gdy zadano to pytanie po raz pierwszy, jest użycie reactrb-express (patrz http://reactrb.org ). Pozwoli to na skryptowanie w języku Ruby po stronie klienta, zastępując kod HTML komponentami reagującymi napisanymi w języku Ruby.

Mitch VanDuyn
źródło

1

op zapytał tylko przy użyciu html i javascript, ale bierzesz go do używania ruby ..: D lol, ale fajny człowiek narzędziowy ..

Meily Chhon

Uznałem, że duch pytania jest - bez języków służących do tworzenia szablonów. to wszystko kompiluje się do Javascript, więc uważam, że spełnia cel pytania.

Mitch VanDuyn

Answer 29

1

op zapytał tylko przy użyciu html i javascript, ale bierzesz go do używania ruby ..: D lol, ale fajny człowiek narzędziowy ..

Meily Chhon

Answer 30

Uznałem, że duch pytania jest - bez języków służących do tworzenia szablonów. to wszystko kompiluje się do Javascript, więc uważam, że spełnia cel pytania.

Mitch VanDuyn

Answer 31

Zapisz kod HTML, który chcesz dołączyć do pliku .html:

Content.html

<a href="howto_google_maps.asp">Google Maps</a><br>
<a href="howto_css_animate_buttons.asp">Animated Buttons</a><br>
<a href="howto_css_modals.asp">Modal Boxes</a><br>
<a href="howto_js_animate.asp">Animations</a><br>
<a href="howto_js_progressbar.asp">Progress Bars</a><br>
<a href="howto_css_dropdown.asp">Hover Dropdowns</a><br>
<a href="howto_js_dropdown.asp">Click Dropdowns</a><br>
<a href="howto_css_table_responsive.asp">Responsive Tables</a><br>

Dołącz kod HTML

Dołączanie kodu HTML odbywa się za pomocą atrybutu w3-include-html :

Przykład

    <div w3-include-html="content.html"></div>

Dodaj JavaScript

Dołączanie HTML jest wykonywane przez JavaScript.

    <script>
    function includeHTML() {
      var z, i, elmnt, file, xhttp;
      /*loop through a collection of all HTML elements:*/
      z = document.getElementsByTagName("*");
      for (i = 0; i < z.length; i++) {
        elmnt = z[i];
        /*search for elements with a certain atrribute:*/
        file = elmnt.getAttribute("w3-include-html");
        if (file) {
          /*make an HTTP request using the attribute value as the file name:*/
          xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() {
            if (this.readyState == 4) {
              if (this.status == 200) {elmnt.innerHTML = this.responseText;}
              if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
              /*remove the attribute, and call this function once more:*/
              elmnt.removeAttribute("w3-include-html");
              includeHTML();
            }
          } 
          xhttp.open("GET", file, true);
          xhttp.send();
          /*exit the function:*/
          return;
        }
      }
    }
    </script>

Wywołaj includeHTML () u dołu strony:

Przykład

<!DOCTYPE html>
<html>
<script>
function includeHTML() {
  var z, i, elmnt, file, xhttp;
  /*loop through a collection of all HTML elements:*/
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /*make an HTTP request using the attribute value as the file name:*/
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
          /*remove the attribute, and call this function once more:*/
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      }      
      xhttp.open("GET", file, true);
      xhttp.send();
      /*exit the function:*/
      return;
    }
  }
};
</script>
<body>

<div w3-include-html="h1.html"></div> 
<div w3-include-html="content.html"></div> 

<script>
includeHTML();
</script>

</body>
</html>

Answer 32

Otrzymuję białą, pustą stronę, kiedy później

testuję

Utwórz pliki nagłówka i stopki, które będą umieszczane na wielu stronach HTML

Odpowiedzi: