W3.js khá tuyệt.
//www.w3schools.com/lib/w3.js
Và chúng tôi tập trung
w3-include-html
Nhưng hãy xem xét trường hợp dưới đây
- 🧾 popup.html
- 🧾 popup.js
- 🧾 include.js
- 📂 partials
- 📂 head
- 🧾 bootstrap-css.html
- 🧾 fontawesome-css.html
- 🧾 all-css.html
- 🧾 hello-world.html
Hello World
Script
// include.js
const INCLUDE_TAG_NAME = `data-include-html`
/**
* @param {Element} node
* @param {Function} cb callback
* */
export async function includeHTML[node, {
cb = undefined
}] {
const nodeArray = node === undefined ?
document.querySelectorAll[`[${INCLUDE_TAG_NAME}]`] :
node.querySelectorAll[`[${INCLUDE_TAG_NAME}]`]
if [nodeArray === null] {
return
}
for [const node of nodeArray] {
const filePath = node.getAttribute[`${INCLUDE_TAG_NAME}`]
if [filePath === undefined] {
return
}
await new Promise[resolve => {
fetch[filePath
].then[async response => {
const text = await response.text[]
if [!response.ok] {
throw Error[`${response.statusText} [${response.status}] | ${text} `]
}
node.innerHTML = text
const rootPath = filePath.split["/"].slice[0, -1]
node.querySelectorAll[`[${INCLUDE_TAG_NAME}]`].forEach[elem=>{
const relativePath = elem.getAttribute[`${INCLUDE_TAG_NAME}`] // not support ".."
if[relativePath.startsWith['/']] { // begin with site root.
return
}
elem.setAttribute[`${INCLUDE_TAG_NAME}`, [...rootPath, relativePath].join["/"]]
}]
node.removeAttribute[`${INCLUDE_TAG_NAME}`]
await includeHTML[node, {cb}]
node.replaceWith[...node.childNodes] // //stackoverflow.com/a/45657273/9935654
resolve[]
}
].catch[err => {
node.innerHTML = `${err.message}`
resolve[]
}]
}]
}
if [cb] {
cb[]
}
}
// popup.js
import * as include from "include.js"
window.onload = async [] => {
await include.includeHTML[undefined, {}]
// ...
}
đầu ra
Hello World
Tìm hiểu làm thế nào để bao gồm các đoạn trích HTML trong HTML.
HTML
Lưu HTML bạn muốn đưa vào tệp .html:
content.html
Google Maps Nút hoạt hình Box Modal Hộp hoạt hình Tiến trình Thanh treo lơ lửng nhấp vào Dropdowns Bảng đáp ứng bảng
Animated Buttons
Modal Boxes
Animations
Progress Bars
Hover Dropdowns
Click Dropdowns
Responsive Tables
Bao gồm HTML
Bao gồm HTML được thực hiện bằng cách sử dụng thuộc tính W3-Include-HTML:w3-include-html attribute:
Thí dụ
Hãy tự mình thử »
Làm cách nào để truy cập vào tệp HTML khác trong HTML?
Thí dụ
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;
}
}
}
Cuộc gọi bao gồmhtml [] ở cuối trang:
Bao gồm nhiều đoạn trích HTML
Bạn có thể bao gồm bất kỳ số lượng đoạn trích HTML nào:
Thí dụ
Hãy tự mình thử »