Hướng dẫn how include html file in html file? - cách bao gồm tệp html trong tệp html?

Question

W3.js khá tuyệt.

Nội dung chính Show

Đánh dấu đơn giản trong tiêu đề
Truy cập nội dung của tệp nhập
Hỗ trợ trình duyệ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

<!-- popup.html -->
<head>
<script defer type="module" src="popup.js"></script>
<meta data-include-html="partials/head/all-css.html">
</head>

<body>
<div data-include-html="partials/hello-world.html"></div>
</body>

<!-- bootstrap-css.html -->
<link href="https://...//dist/css/bootstrap.min.css" rel="stylesheet" />

<!-- fontawesome-css.html -->
<link rel="stylesheet" href="https://.../font-awesome/5.15.4/css/all.min.css" />

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

đầu ra

<!-- popup.html -->

<head>

<link href="https://...//dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://.../font-awesome/5.15.4/css/all.min.css" />
</head>

<body>
<h2>Hello World</h2>
</body>

Các yếu tố liên kết là một phước lành. Nó cho phép dễ dàng nhúng các kiểu dáng và javascripts cần thiết trong nhiều tài liệu. Mặc dù vậy, nó đã cho phép nhúng các tệp HTML. Để đạt được rằng, chúng tôi đã giới hạn ở phần tử „ifRames hoặc phương thức JavaScript„ XMLHttprequest (). Nhờ nhập HTML5 mới, giờ đây chúng ta có thể sử dụng phần tử „để tải một tệp HTML vào một tệp khác.

Pro-Tip

Đăng ký một tài khoản jotform miễn phí để tạo các biểu mẫu trực tuyến mạnh mẽ trong vài phút - không cần mã hóa.free Jotform account to create powerful online forms in minutes — with no coding required.

Đánh dấu đơn giản trong tiêu đề

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 „Nhập vào thuộc tính„ rel. Sử dụng „href, chúng tôi đính kèm URL của tệp HTML, giống như chúng tôi đã quen khi nói đến các bảng kiểu và tập lệnh.

<link href="extern.html" rel="import" />

Nếu tệp được nhập chứa thêm „Phong cách hoặc„ tập lệnh các phần tử, chúng cũng sẽ được nhập. Không quan trọng liệu các yếu tố này được đánh dấu trong đầu hay cơ thể của tài liệu. Một trường hợp sử dụng cho nhập khẩu HTML5 cũng có thể là, để thu thập tất cả các kiểu dáng và tập lệnh cần thiết trong một dự án nhất định và thêm vào một tệp HTML duy nhất, sau đó được nhập vào tất cả các tệp dự án khác. Điều này phần lớn đơn giản hóa việc duy trì các dự án lớn hơn.

Mặc dù tài liệu được nhập chứa các kiểu dáng, những thứ này sẽ được đưa ra trực tiếp. Các bảng kiểu được xác định trước đó của tài liệu cha sẽ bị ghi đè. Để đảm bảo điều này không xảy ra, hãy chăm sóc vị trí của liên kết nhập trong tài liệu chính. Điều tương tự cũng đúng với javascripts. Ngay cả các phần tử được tham chiếu bên ngoài từ tài liệu đã nhập sẽ được tải vào tài liệu cha.

Truy cập nội dung của tệp nhập

Nội dung khác từ tài liệu đã nhập sẽ được tải, nhưng không được hiển thị. Tất cả các văn bản, hình ảnh và phương tiện khác sẽ không thể nhìn thấy vì chúng không phải là một phần của cây Dom của tài liệu mẹ. Bạn vẫn có thể truy cập chúng thông qua JavaScript, mặc dù.

var extern = document.getElementsByTagName("link")[0].import;

Ví dụ của chúng tôi giả định rằng phần tử liên kết đầu tiên tải một tệp HTML. Sử dụng thuộc tính JavaScript „Nhập, Chúng tôi viết cấu trúc cây hoàn chỉnh của tệp đã nhập vào một biến. Từ đó chúng tôi có thể truy cập các nút riêng lẻ thông qua JavaScript.

<!-- popup.html -->
<head>
<script defer type="module" src="popup.js"></script>
<meta data-include-html="partials/head/all-css.html">
</head>

<body>
<div data-include-html="partials/hello-world.html"></div>
</body>

0

Từ đây, chúng ta có thể truy cập và đọc tất cả các nút bằng các phương thức JavaScript phổ biến như „getElsionSByTagName (). Bây giờ chúng tôi có thể thêm chúng một cách thoải mái vào cây DOM của tài liệu mẹ. Trong một cách tiếp cận triệt để hơn, chúng ta cũng có thể thay thế hoàn toàn phần tử „cơ thể bằng nội dung của tệp đã nhập.

<!-- popup.html -->
<head>
<script defer type="module" src="popup.js"></script>
<meta data-include-html="partials/head/all-css.html">
</head>

<body>
<div data-include-html="partials/hello-world.html"></div>
</body>

1

Ví dụ của chúng tôi thay thế nội dung của phần tử „cơ thể bằng cách sử dụng„ thay thế (). Để đảm bảo sự thay thế không bắt đầu trước khi tất cả các yếu tố được tải, chức năng bị ràng buộc với trình nghe sự kiện được thêm qua „addEventListener ().

Hỗ trợ trình duyệt

Tại thời điểm viết bài này chỉ có Chrome hỗ trợ nhập khẩu HTML5. Ngoài ra, bạn phải kích hoạt chức năng theo cách thủ công. Gọi „chrome: // cờ trên thanh địa chỉ, cho phép bạn truy cập vào các tính năng thử nghiệm. Tìm kiếm „Kích hoạt nhập khẩu HTML và - tốt - kích hoạt nó. Sau khi bắt đầu nhập khẩu Chrome HTML5 mới của bạn sẽ có sẵn.

Sử dụng chức năng sau để kiểm tra xem Trình duyệt nhất định có hỗ trợ nhập HTML5 hay không.

<!-- popup.html -->
<head>
<script defer type="module" src="popup.js"></script>
<meta data-include-html="partials/head/all-css.html">
</head>

<body>
<div data-include-html="partials/hello-world.html"></div>
</body>

2

Các trình duyệt cũ hơn có thể sử dụng polyfill, mô phỏng nhập khẩu HTML5 trong các trình duyệt không được hỗ trợ. Bằng cách đó, không cần phải đi mà không có nhập khẩu HTML5 trong các dự án web hiện đại.

(dpe)

Bài viết này ban đầu được xuất bản vào ngày 15 tháng 7 năm 2014 và được cập nhật vào ngày 24 tháng 2 năm 2022.

programming html Tag include html Code embed html gulp-file-include Create embed