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ụ
w3-include-html="content.html">
Thêm JavaScript
HTML bao gồm được thực hiện bởi JavaScript.
Thí dụ
Thêm JavaScript
HTML bao gồm được thực hiện bởi JavaScript.
hàm bao gồmHtml () {& nbsp; var z, i, elmnt, file, xhttp; & nbsp; / * Loop thông qua một bộ sưu tập tất cả các yếu tố HTML: */& nbsp; z = document.getElsByTagName ("*"); & nbsp; for (i = 0; i
<!-- all-css.html -->
<meta data-include-html="bootstrap-css.html">
<meta data-include-html="fontawesome-css.html">
<!--
If you want to use w3.js.include, you should change as below
<meta w3-include-html="partials/head/bootstrap-css.html">
<meta w3-include-html="partials/head/fontawesome-css.html">
Of course, you can add the above in the ``popup.html`` directly.
If you don't want to, then consider using my scripts.
-->
<!-- hello-world.html -->
<h2>Hello World</h2>
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) // https://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, {})
// ...
}
Nhúng một tệp HTML rất đơn giản.Tất cả những gì chúng ta cần làm là sử dụng phần tử „phổ biến. Sau đó, chúng tôi thêm giá trị„ Nhập trực tiếp vào thuộc tính „rel.đến các kiểu dáng và kịch bản.use the common „“ element.Then we add the value „import“ to the „rel“ attribute.Using „href“ we attach the URL of the HTML file, just like we are used to when it comes to stylesheets and scripts.
Làm thế nào để bạn liên kết với một tệp khác trong HTML?
Các tệp HTML là các tệp văn bản đại diện cho nội dung và bố cục của một trang web.Để đọc tệp HTML, bạn có thể sử dụng bất kỳ trình soạn thảo văn bản nào (ví dụ: Notepad, Notepad ++ hoặc bất kỳ trình soạn thảo HTML chuyên dụng nào).use any text editor (e.g notepad, notepad++, or any specialized HTML editor).
