一般我們在做網站透過前端框架或後端語言要把網頁拆成元件後讀進來都很簡單,如果沒有用到以上提到的方式,單純想在 HTML 檔案裡讀入其他的 HTML 檔案,可以考慮使用 w3 的方法。
Step1:讀入 js
將 w3.js 讀入
<script src="https://www.w3schools.com/lib/w3.js"></script>
也可以下載 js 後再讀入頁面。
Step2:在 body 的 js 加入這段
w3.includeHTML();
Step3:在 html 讀入其他的 html 檔案
這邊舉例來說我把 header 的部分存在一個 header.html 的檔案,然後想在另一個 index.html 檔案裡讀入,就可以在 index.html 裡寫
<div w3-include-html="header.html" ></div>
給有需要的朋友參考。