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:you@you.com'>Contact Us</a> / "
	+ "<a href='mailto:you@you.com'>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:you@you.com'>Contact Us</a> / "
+ "<a href='mailto:you@you.com'>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>