Đưa-html vào HTML

Tôi đang tìm kiếm một giải pháp đơn giản cho phép tôi đưa một phần HTML vào bên trong tệp HTML khác mà không cần ngôn ngữ phía máy chủ hoặc nhu cầu về quy trình xây dựng javascript

Khi tôi tìm kiếm một giải pháp dễ dàng trên các trang web, tôi tình cờ thấy trang Thủ thuật CSS này có tiêu đề. "Các cách đơn giản nhất để xử lý HTML bao gồm"

Đưa-html vào HTML

Trên trang này, chriscoyier (tác giả của CSS-Tricks), đã viết một đoạn mã giống như thế này

...
<body>
   <include src="./header.html">include>

   Content

   <include src="./footer.html">include>
body>
...

Và, dòng tiếp theo nói rằng đây không phải là Real, nhưng anh ước nó là. Phần còn lại của bài viết giải thích các khuôn khổ và ngôn ngữ khác nhau để thực hiện điều này

Chà, điều đó khiến tôi tự hỏi tại sao điều này lại không thể xảy ra, và điều đó đã khiến tôi rơi vào một hố thỏ nhỏ 🐇 của sự khám phá và sáng tạo. Tôi đã tạo một tập lệnh đơn giản mà bạn có thể đưa vào trang HTML của mình để thực hiện điều này

Kịch bản

Tôi đã xuất bản tập lệnh trên NPM tại đây. https. //www. npmjs. com/package/htmlincludejs và đơn giản như bao gồm đoạn mã sau vào trang của bạn

<script src="https://unpkg.com/htmlincludejs">script>

Và bây giờ bạn có thể hiển thị HTML bên trong một tệp HTML khác bằng cách sử dụng thẻ sau

<include src="./nav.html">include>

Tuyệt vời 👏, bạn có thể xem một ví dụ thực sự nhanh chóng từ hộp mã này bên dưới

🤩 Nhà tài trợ tuyệt vời của chúng tôi 👇

Xem trang web

DigitalOcean cung cấp giải pháp lưu trữ đám mây đơn giản và đáng tin cậy cho phép các nhà phát triển nhanh chóng thiết lập và chạy trang web hoặc ứng dụng của họ

Xem trang web

Bảng công việc chính thức của Laravel. Tìm các nhà phát triển Laravel giỏi nhất và tài năng nhất bằng cách đăng công việc của bạn trên bảng việc làm chính thức của Laravel

Xem trang web

Tìm hiểu cách viết mã chuỗi khối của riêng bạn và tạo tiền điện tử của riêng bạn với nền tảng đào tạo trực tuyến thú vị và tương tác CoinCap. Tìm hiểu thêm về chương trình tài trợ DevDojo và xem biểu trưng của bạn tại đây để đưa thương hiệu của bạn đến với hàng nghìn nhà phát triển.

Đây là mã bên trong hộp cát đó

html>
<html>
  <head>
    <title>HTML Includestitle>
    <meta charset="UTF-8" />
    <script src="https://unpkg.com/htmlincludejs">script>
  head>

  <body>
    <include src="./nav.html">include>
  body>
html>

Hãy tìm hiểu cách đơn giản để thực hiện bằng tay

Làm thế nào nó hoạt động

Cách thức hoạt động này thực sự khá dễ dàng. Hãy xem kịch bản chưa hoàn thành bên dưới

let includes = document.getElementsByTagName('include');
for(var i=0; ilet include = includes[i];
    load_file(includes[i].attributes.src.value, function(text){
        include.insertAdjacentHTML('afterend', text);
        include.remove();
    });
}
function load_file(filename, callback) {
    fetch(filename).then(response => response.text()).then(text => callback(text));
}

Tất cả những gì chúng tôi đang làm là lặp qua bất kỳ thẻ nào và sau đó chúng tôi đang thực hiện một javascript đơn giản fetch để truy xuất nội dung của từng phần và đặt nó sau thẻ . Sau đó, chúng tôi xóa thẻ bao gồm và chúng tôi sẵn sàng bắt đầu 😉

ví dụ

Dưới đây là một số ví dụ khác về CodeSandbox bên dưới

Bạn có thể thấy rằng chúng tôi cũng có thể đưa một số phép thuật [AlpineJS] đơn giản vào các phần của chúng tôi và javascript vẫn hoạt động. )

Còn một ví dụ khác sử dụng một số TailwindCSS thì sao

Phần kết luận

Nếu bạn cần một giải pháp đơn giản để bao gồm các phần HTML bên trong một tệp HTML khác, bạn có thể muốn tiếp cận giải pháp đơn giản này

Tôi có thể đưa HTML vào HTML không?

Việc nhúng 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ử „ Sau đó, chúng ta thêm giá trị „import“ 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ư cách chúng tôi đã quen với biểu định kiểu và tập lệnh.

Làm thế nào để kết hợp HTML và HTML?

Cách hợp nhất tệp HTML trực tuyến .
Chọn hoặc thả tài liệu HTML của bạn để tải lên để hợp nhất
Sau khi tải lên hoàn tất, hãy kéo hình thu nhỏ của tài liệu HTML để sắp xếp lại chúng (nếu cần)
Nhấp vào nút Hợp nhất ngay để bắt đầu quá trình hợp nhất
Khi các tài liệu HTML của bạn được hợp nhất, hãy nhấp vào nút Tải xuống ngay