在 HTML 讀入 別的 HTML 檔案

分享:

一般我們在做網站透過前端框架或後端語言要把網頁拆成元件後讀進來都很簡單,如果沒有用到以上提到的方式,單純想在 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>

給有需要的朋友參考。

 

課程推薦

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。