Hướng dẫn how do i export and import an html file? - làm cách nào để xuất và nhập tệp html?

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.

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.

var absatz = extern.getElementsByTagName("p")[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.

window.addEventListener("load", function() {
  document.getElementsByTagName("html")[0].replaceChild(extern.getElementsByTagName("body")[0], document.getElementsByTagName("body")[0]);
}, false);

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.

if ("import" in document.createElement("link")) {
  // HTML5 Imports are supported.
}

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.