W3.JS HTML 包含
包含一個 HTML 檔案
w3.includeHTML()
HTML 程式碼
將要包含的 HTML 儲存到 .html 檔案中
content.html
<a href="https://w3schools.tw/html/">HTML</a><br>
<a href="https://w3schools.tw/css/">CSS</a><br>
<a href="https://w3schools.tw/bootstrap/">Bootstrap</a><br>
<a href="https://w3schools.tw/js/">JavaScript</a><br>
<a href="https://w3schools.tw/sql/">SQL</a><br>
<a href="https://w3schools.tw/php/">PHP</a><br>
<a href="https://w3schools.tw/w3css/">W3.CSS</a><br>
包含 HTML
包含 HTML 是透過使用 w3-include-html 屬性實現的
示例
<div w3-include-html="content.html"></div>
新增 JavaScript
HTML 包含是透過 JavaScript 完成的。
確保你的頁面載入了 w3.js 並呼叫 w3.includeHTML()
示例
<script>
w3.includeHTML();
</script>
完整示例
示例
<!DOCTYPE html>
<html>
<script src="/lib/w3.js"></script>
<body>
<div w3-include-html="content.html"></div>
<script>
w3.includeHTML();
</script>
</body>
</html>
自己動手 » 帶 CSS »包含多個 HTML 片段
你可以包含任意數量的 HTML 片段
示例
<!DOCTYPE html>
<html>
<script src="/lib/w3.js"></script>
<body>
<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>
<script>
w3.includeHTML();
</script>
</body>
<html>
添加回調函式
當你在網頁中包含 HTML 片段時，必須確保依賴於所包含 HTML 的其他函式在 HTML 正確包含之前不會執行。
“延遲”程式碼的最簡單方法是將其放在回撥函式中。
回撥函式可以作為引數新增到 w3.includeHTML() 中
示例
<script>
w3.includeHTML(myCallback);
function myCallback() {
// 需要等待的程式碼放在這裡
}
</script>
你將在本教程的下一章找到一個回撥示例。
