Buat file header dan footer untuk dimasukkan dalam beberapa halaman html

140

Saya ingin membuat halaman header dan footer yang umum yang disertakan pada beberapa halaman html.

Saya ingin menggunakan javascript. Apakah ada cara untuk melakukan ini hanya menggunakan html dan JavaScript?

Saya ingin memuat halaman header dan footer dalam halaman html lain.

javascript jquery html css Prasanth AR
sumber
1
Anda mencari ajax ... $ ('. MyElement) .load (' urltopage.html '); ini akan memuat konten urltopage.html di .myElement
Salketer
stackoverflow.com/a/8592403/896341
Stefan

Jawaban:

192

Anda dapat melakukannya dengan jquery .

Tempatkan kode ini 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>

dan letakkan kode ini di header.htmldan footer.html, di lokasi yang sama denganindex.html

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

Sekarang, ketika Anda mengunjungi index.html, Anda harus dapat mengklik tag tautan.

Prolanx Hariprasad
sumber
Iya. semua halaman harus memiliki struktur halaman ini
Hariprasad Prolanx
19
memuat atau fungsi lain yang mengimpor atau menggunakan yang local filetidak berfungsi di versi baru Google Chrome atau IE, alasan: keamanan!
Sinac
7
Terkadang saya bertanya-tanya bagaimana orang bisa bernafas tanpa jQuery. Atau apakah sudah ada .breathe(in)dan .breathe(out)sudah? Bahasa scripting apa pun benar-benar berlebihan di sini.
Konspirasi
6
Saya terus mendapatkan Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.ketika saya berlari di chrome
digiwebguy
1
Diperlukan untuk menjalankan kode di server. Yang berarti url harus seperti "http: // .....".
Patriotik
37

Saya menambahkan bagian umum sebagai header dan footer menggunakan Server Side Includes . Tidak perlu HTML dan JavaScript. Sebagai gantinya, server web secara otomatis menambahkan kode yang disertakan sebelum melakukan hal lain.

Cukup tambahkan baris berikut di mana Anda ingin memasukkan file Anda:

<!--#include file="include_head.html" -->
Konspirasi
sumber
6
Saya suka cara kuno ini. Bahkan, sepertinya tidak banyak manfaat menggunakan skrip untuk melakukan tindakan sederhana.
Jenna Leaf
3
Bahkan, termasuk file menggunakan skrip memiliki kelemahan besar: Ini menghambat kinerja karena klien perlu mengunduh halaman utama, memuat DOM, menjalankan skrip dan hanya kemudian dapat mengunduh file yang disertakan, yang membutuhkan permintaan server tambahan per file yang disertakan . Termasuk file menggunakan Sisi Server Termasuk melayani semua elemen selama permintaan server pertama, tidak ada tindakan klien yang diperlukan.
Konspirasi
SSI memerlukan menggunakan ekstensi file dari: .shtml, .stm, .shtm. Ia bekerja di Apache, LiteSpeed, nginx, lighttpd dan IIS.
ubershmekel
@ubershmekel Seperti yang Anda katakan, webservers yang relevan mendukung SSI. Ekstensi file tidak terbatas pada .shtml, .stmdan .shtm: Pada IIS, semua file yang diurai dapat berisi SSI, misalnya .aspx. Jika bekerja dengan PHP, Anda harus menggunakan PHP includeatau virtualperintah sebagai gantinya untuk mencapai hasil yang sama.
Konspirasi
32

Haruskah Anda menggunakan struktur file html dengan JavaScript? Sudahkah Anda mempertimbangkan untuk menggunakan PHP sehingga Anda dapat menggunakan objek PHP include yang sederhana?

Jika Anda mengonversi nama file halaman .html Anda ke .php - lalu di bagian atas setiap halaman .php Anda, Anda dapat menggunakan satu baris kode untuk memasukkan konten dari header.php Anda 

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

Lakukan hal yang sama di footer dari setiap halaman untuk memasukkan konten dari file footer.php Anda

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

Tidak diperlukan JavaScript / Jquery atau file tambahan tambahan.

NB Anda juga bisa mengonversi file .html Anda menjadi file .php menggunakan yang berikut ini di file .htaccess Anda

# 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]
Sol
sumber
2
@ Justin808 - OP tidak menyebutkan tentang instalasi yang di-host lokal, jadi saya kira dia berbicara tentang file berbasis server.
Sol
1
@ Sol Namun OP DID secara khusus menyebutkan ingin menggunakan Javascript, jadi jawaban Anda di luar topik. Pengembangan web full-stack dengan cepat menjauh dari penggunaan PHP sama sekali, Node.js menyediakan semua fungsi yang setara dan hanya membutuhkan Javascript untuk digunakan. TL; DR harap jawab pertanyaan saat ditanyakan. OP menginginkan solusi JS, jadi tidak pantas untuk memberinya solusi PHP, Ruby, Python, C ++, atau bahasa lainnya.
Zach
9

Saya mencoba ini: Buat file header.html suka

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

Sekarang sertakan header.html di halaman HTML Anda seperti:

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

Bekerja dengan sangat baik.

Asheesh Gupta
sumber
1
Solusi yang bagus, tapi saya pikir ini akan memuat kerangka kerja jquery dua kali, sekali untuk memuat halaman awal, dan kedua ketika metode .load () dijalankan - karena halaman target juga berisi jquery.
Delali
8

Anda juga bisa meletakkan: (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>
Luaskan cuplikan

JustinM
sumber
6

Saya pikir, jawaban atas pertanyaan ini terlalu lama ... saat ini beberapa browser desktop dan seluler mendukung Template HTML untuk melakukan ini.

Saya telah membangun sedikit contoh:

Diuji OK di Chrome 61.0, Opera 48.0, Opera Neon 1.0, Browser Android 6.0, Chrome Mobile 61.0 dan Browser Adblocker 54.0
Diuji KO di Safari 10.1, Firefox 56.0, Edge 38.14 dan IE 11

Info kompatibilitas lebih lanjut di 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;
}

Anda bisa mendapatkan lebih banyak contoh di pos HTML5 Rocks ini

JavierFuentes
sumber
4
Impor HTML sekarang sudah tidak digunakan lagi.
Jonathan Sharman
5

Saya telah bekerja di C # / Razor dan karena saya tidak memiliki pengaturan IIS di laptop rumah saya, saya mencari solusi javascript untuk memuat pandangan sambil membuat markup statis untuk proyek kami.

Saya menemukan sebuah situs web yang menjelaskan metode "membuang jquery," itu menunjukkan metode di situs tersebut melakukan apa yang Anda inginkan dalam javascript Jane polos ( tautan referensi di bagian bawah posting). ). Pastikan untuk menyelidiki kerentanan keamanan dan masalah kompatibilitas jika Anda bermaksud menggunakannya dalam produksi. Saya tidak, jadi saya tidak pernah melihatnya sendiri.

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

Dapatkan kontennya

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>

Sumbernya bukan milik saya, saya hanya merujuknya karena ini adalah solusi javascript vanilla yang bagus untuk OP. Kode asli ada di sini: http://gomakethings.com/ditching-jquery#get-html-from-another-page

darcher
sumber
Solusi yang bagus Saya lebih suka yang ini menggunakan jquery.
Delali
2

Aloha dari 2018. Sayangnya, saya tidak punya sesuatu yang keren atau futuristik untuk dibagikan dengan Anda.

Namun saya ingin menunjukkan kepada mereka yang berkomentar bahwa load()metode jQuery tidak berfungsi saat ini mungkin mencoba menggunakan metode ini dengan file lokal tanpa menjalankan server web lokal. Melakukan hal ini akan membuang disebutkan di atas "asal salib" kesalahan, yang menentukan bahwa salib asal meminta seperti yang dibuat dengan metode beban hanya didukung untuk skema protokol seperti http, data, atau https . (Saya berasumsi bahwa Anda tidak membuat permintaan lintas asal yang sebenarnya, yaitu file header.html sebenarnya berada di domain yang sama dengan halaman tempat Anda memintanya)

Jadi, jika jawaban yang diterima di atas tidak berfungsi untuk Anda, pastikan Anda menjalankan server web. Cara tercepat dan termudah untuk melakukannya jika Anda terburu-buru (dan menggunakan Mac, yang memiliki Python pra-instal) adalah dengan memutar server http Python sederhana. Anda dapat melihat betapa mudahnya melakukannya di sini .

Saya harap ini membantu!

Menandai
sumber
Menggunakan server web mengalahkan intinya, setidaknya bagi saya alasan untuk menggunakan Javascript hanya untuk mengembangkannya lebih mudah.
Konrad Höffner
1

Dimungkinkan juga untuk memuat skrip dan tautan ke header. Saya akan menambahkannya salah satu contoh di atas ...

<!--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>
Samuel Omopariola
sumber
0

pendekatan lain yang tersedia sejak pertanyaan ini pertama kali ditanyakan adalah menggunakan reactrb-express (lihat http://reactrb.org ) Ini akan memungkinkan Anda skrip dalam ruby ​​di sisi klien, mengganti kode html Anda dengan komponen reaksi yang ditulis dalam ruby.

Mitch VanDuyn
sumber
1
op hanya bertanya menggunakan html dan javascript tetapi Anda membawanya menggunakan ruby ​​..: D lol tapi alat keren man ..
Meily Chhon
Saya mengambil semangat pertanyaan menjadi - tanpa server templating bahasa. itu semua dikompilasi ke Javascript jadi saya percaya itu memenuhi maksud pertanyaan.
Mitch VanDuyn
-1

Simpan HTML yang ingin Anda sertakan dalam file .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>

Sertakan HTML

Termasuk HTML dilakukan dengan menggunakan atribut w3-include-html :

Contoh

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

Tambahkan JavaScript

Termasuk HTML dilakukan oleh 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>

Sebut termasukHTML () di bagian bawah halaman:

Contoh

<!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>
Raaf003
sumber
Saya mendapatkan halaman putih kosong ketika saya menguji index.html setelah itu
Hussein Elbeheiry