ทำให้ไฟล์ส่วนหัวและส่วนท้ายรวมอยู่ในหน้า html หลายหน้า

Question 1

ฉันต้องการสร้างหน้าส่วนหัวและส่วนท้ายทั่วไปที่รวมอยู่ในหน้า html หลายหน้า

ฉันต้องการใช้จาวาสคริปต์ มีวิธีดำเนินการโดยใช้ html และ JavaScript เท่านั้นหรือไม่?

ฉันต้องการโหลดหน้าส่วนหัวและส่วนท้ายในหน้า html อื่น

Question 2

คุณสามารถทำได้ด้วยjQuery

วางรหัสนี้ไว้ 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>

และใส่รหัสนี้ในheader.htmlและfooter.htmlที่สถานที่เดียวกับindex.html

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

ตอนนี้เมื่อคุณเยี่ยมชมindex.htmlคุณควรจะคลิกแท็กลิงก์ได้

Question 3

ฉันจะเพิ่มชิ้นส่วนร่วมกันเป็นส่วนหัวและท้ายใช้ด้าน Server รวม ไม่ต้องใช้ HTML และไม่จำเป็นต้องใช้ JavaScript แต่เว็บเซิร์ฟเวอร์จะเพิ่มรหัสที่รวมอยู่โดยอัตโนมัติก่อนที่จะดำเนินการอย่างอื่น

เพียงเพิ่มบรรทัดต่อไปนี้ที่คุณต้องการรวมไฟล์ของคุณ:

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

Question 4

คุณต้องใช้โครงสร้างไฟล์ html กับ JavaScript หรือไม่? คุณได้พิจารณาใช้ PHP แทนเพื่อให้คุณสามารถใช้ PHP รวมวัตถุได้หรือไม่?

หากคุณแปลงชื่อไฟล์ของหน้า. html ของคุณเป็น. php - จากนั้นที่ด้านบนของหน้า. php แต่ละหน้าของคุณคุณสามารถใช้โค้ดหนึ่งบรรทัดเพื่อรวมเนื้อหาจาก header.php ของคุณ

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

ทำเช่นเดียวกันในส่วนท้ายของแต่ละหน้าเพื่อรวมเนื้อหาจากไฟล์ footer.php ของคุณ

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

ไม่จำเป็นต้องใช้ JavaScript / Jquery หรือไฟล์ที่รวมเพิ่มเติม

NB คุณยังสามารถแปลงไฟล์. html ของคุณเป็นไฟล์. php โดยใช้สิ่งต่อไปนี้ในไฟล์. 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

ฉันลองแล้ว: สร้างไฟล์header.htmlเช่น

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

ตอนนี้รวมheader.htmlในหน้า HTML ของคุณเช่น:

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

ทำงานได้ดีอย่างสมบูรณ์

Question 6

คุณยังสามารถใส่: (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>

ขยายข้อมูลโค้ด

Question 7

ฉันทำงานใน C # / Razor และเนื่องจากฉันไม่มีการตั้งค่า IIS บนแล็ปท็อปที่บ้านของฉันฉันจึงมองหาโซลูชันจาวาสคริปต์เพื่อโหลดในมุมมองในขณะที่สร้างมาร์กอัปแบบคงที่สำหรับโครงการของเรา

ฉันสะดุดกับเว็บไซต์ที่อธิบายวิธีการ "ditching jquery" มันแสดงให้เห็นว่าวิธีการบนไซต์ทำสิ่งที่คุณต้องการใน Jane javascript ธรรมดา ( ลิงก์อ้างอิงที่ด้านล่างของโพสต์ ) อย่าลืมตรวจสอบช่องโหว่ด้านความปลอดภัยและปัญหาความเข้ากันได้หากคุณต้องการใช้สิ่งนี้ในการใช้งานจริง ฉันไม่ได้ดังนั้นฉันไม่เคยมองเข้าไปในตัวเอง

ฟังก์ชัน 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();
};

รับเนื้อหา

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>

แหล่งที่มาไม่ใช่ของฉันฉันแค่อ้างถึงเพราะมันเป็นวิธีแก้ปัญหาจาวาสคริปต์วานิลลาที่ดีสำหรับ OP รหัสต้นฉบับอยู่ที่นี่: http://gomakethings.com/ditching-jquery#get-html-from-another-page

Question 8

ฉันคิดว่าคำตอบสำหรับคำถามนี้เก่าเกินไป ... ปัจจุบันเบราว์เซอร์บนเดสก์ท็อปและมือถือบางรุ่นรองรับเทมเพลต HTMLสำหรับการดำเนินการนี้

ฉันได้สร้างตัวอย่างเล็กน้อย:

ทดสอบ OKใน Chrome 61.0, Opera 48.0, Opera Neon 1.0, Android Browser 6.0, Chrome Mobile 61.0 และ Adblocker Browser 54.0
ทดสอบ KOใน Safari 10.1, Firefox 56.0, Edge 38.14 และ IE 11

ข้อมูลความเข้ากันได้เพิ่มเติมใน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;
}

คุณสามารถดูตัวอย่างเพิ่มเติมได้ในโพสต์ HTML5 Rocks นี้

Question 9

Aloha จากปี 2018 น่าเสียดายที่ฉันไม่มีอะไรเจ๋ง ๆ หรือล้ำยุคจะแบ่งปันกับคุณ

อย่างไรก็ตามฉันต้องการชี้ให้ผู้ที่แสดงความคิดเห็นว่าload()วิธีการjQuery ไม่ทำงานในปัจจุบันอาจพยายามใช้วิธีนี้กับไฟล์ในเครื่องโดยไม่ต้องเรียกใช้เว็บเซิร์ฟเวอร์ภายใน การทำเช่นนี้จะโยนดังกล่าวข้างต้น "ต้นกำเนิดข้ามข้อผิดพลาด" ซึ่งระบุว่าต้นกำเนิดข้ามร้องขอเช่นที่ทำโดยวิธีการโหลดได้รับการสนับสนุนเฉพาะสำหรับแผนการโปรโตคอลเช่นhttp, หรือdata https(ฉันสมมติว่าคุณไม่ได้ส่งคำขอข้ามแหล่งที่มาจริงนั่นคือไฟล์ header.html นั้นอยู่ในโดเมนเดียวกับหน้าที่คุณขอ)

ดังนั้นหากคำตอบที่ยอมรับข้างต้นไม่ได้ผลสำหรับคุณโปรดตรวจสอบให้แน่ใจว่าคุณใช้งานเว็บเซิร์ฟเวอร์ วิธีที่เร็วและง่ายที่สุดในการทำเช่นนั้นหากคุณเร่งรีบ (และใช้ Mac ซึ่งติดตั้ง Python ไว้ล่วงหน้า) คือการหมุนเซิร์ฟเวอร์ Python http แบบธรรมดา คุณสามารถดูวิธีที่ง่ายก็คือการทำที่นี่

ฉันหวังว่านี่จะช่วยได้!

Question 10

นอกจากนี้ยังสามารถโหลดสคริปต์และลิงก์ลงในส่วนหัวได้ ฉันจะเพิ่มหนึ่งในตัวอย่างด้านบน ...

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

อีกวิธีหนึ่งที่มีให้เนื่องจากคำถามนี้ถูกถามครั้งแรกคือการใช้ reactrb-express (ดูhttp://reactrb.org ) วิธีนี้จะช่วยให้คุณเขียนสคริปต์เป็น Ruby ในฝั่งไคลเอ็นต์โดยแทนที่โค้ด html ของคุณด้วยส่วนประกอบการตอบสนองที่เขียนด้วยทับทิม

Question 12

บันทึก HTML ที่คุณต้องการรวมไว้ในไฟล์. 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>

รวม HTML

การรวม HTML ทำได้โดยใช้แอตทริบิวต์w3-include-html :

ตัวอย่าง

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

เพิ่ม JavaScript

การรวม HTML ทำได้โดย 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>

โทร includeHTML () ที่ด้านล่างของหน้า:

ตัวอย่าง

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