Hướng dẫn can we include html file in html? - chúng ta có thể đưa tệp html vào html không?

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ụ

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

Thí dụ

Thêm JavaScript

W3.js khá tuyệt.

https://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) // 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, {})
  // ...
}

đầu ra

Hello World

HTML có thể bao gồm một tệp HTML khác không?

Làm thế nào để bạn tập tin HTML bao gồm trong HTML?

Làm cách nào để kết hợp các tệp HTML?

Làm cách nào để hiển thị nội dung của một trang HTML trong một trang khác?