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"
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
...
Content
...
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
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
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 LaravelXem 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 Includes
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; i 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