Bao gồm tệp HTML

Question

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

Nội dung chính Show

Kịch bản
Làm thế nào nó hoạt động
Phần kết luận
Tôi có thể bao gồm tệp HTML trong HTML không?
Làm cách nào để thêm một tệp trong HTML?
Làm cách nào để đưa tệp vào HTML bằng JavaScript?
Làm cách nào để đưa tệp HTML vào HTML bằng jQuery?

Khi tôi tìm kiếm trên các trang web để tìm một giải pháp dễ dàng, 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

...
<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 đó

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Includes</title>
    <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; i<includes.length; i++){
    let 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ẻ <include> nào và sau đó chúng tôi đang thực hiện một javascript fetch đơn giản để truy xuất nội dung của từng phần và đặt nó sau thẻ <include>. 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ể bao gồm tệp HTML trong HTML không?

Đánh dấu đơn giản trong Tiêu đề . 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 cách nào để thêm một tệp trong HTML?

The xác định trường chọn tệp và nút "Duyệt qua" để tải tệp lên. Để xác định trường chọn tệp cho phép chọn nhiều tệp, hãy thêm thuộc tính multiple. Mẹo. Luôn thêm thẻ

Làm cách nào để đưa tệp vào HTML bằng JavaScript?

Để bao gồm một tệp JavaScript bên ngoài, chúng ta có thể sử dụng thẻ script với thuộc tính src . Bạn đã sử dụng thuộc tính src khi sử dụng hình ảnh. Giá trị cho thuộc tính src phải là đường dẫn đến tệp JavaScript của bạn. Thẻ tập lệnh này phải được bao gồm giữa các thẻ

Làm cách nào để đưa tệp HTML vào HTML bằng jQuery?

Bao gồm jQuery bằng CDN . Đầu tiên, chúng ta phải mở tệp Html mà chúng ta muốn thêm jQuery bằng CDN. Step 1: Firstly, we have to open that Html file in which we want to add the jQuery using CDN. Bước 2. Sau đó, chúng ta phải đặt con trỏ giữa thẻ đầu ngay trước thẻ tiêu đề. Và, sau đó chúng ta phải sử dụng thẻ

programming html