Nhập html dưới dạng chuỗi javascript
|
Bạn có thể thêm các tệp nguồn JavaScript cổ điển, mô-đun JavaScript và nhập HTML (chế độ tương thích) vào trang máy chủ của mình trực tiếp từ các lớp Java của bạn Show
Ghi chú Mẫu Polymer 3 phải được nhập bằng cách sử dụng@JsModule (xem Tạo mẫu Polymer để biết thêm thông tin)Có hai cách để thêm tệp JavaScript và HTML. Cả hai đều có tác dụng như nhau và bạn có thể sử dụng cái nào phù hợp với mình nhất
Xem Lưu trữ và tải tài nguyên để biết thêm về cách lưu trữ tài nguyên của bạn, định cấu hình tải tài nguyên nâng cao và đặt hàng tải tài nguyên Yếu tố „liên kết“ là một điều may mắn. Nó cho phép dễ dàng nhúng các biểu định kiểu và JavaScript cần thiết vào nhiều tài liệu. Tuy nhiên, nó không cho phép nhúng các tệp HTML. Để đạt được điều đó, chúng tôi đã giới hạn ở phần tử „iframes“ hoặc phương thức JavaScript „XMLHttpRequest()“. Nhờ Nhập khẩu HTML5 mới, giờ đây chúng ta có thể sử dụng phần tử „“ để tải một tệp HTML sang một tệp khác  Mẹo chuyên nghiệp Đăng ký tài khoản Jotform miễn phí để tạo biểu mẫu trực tuyến hiệu quả trong vài phút — không cần viết mã Đánh dấu đơn giản trong tiêu đềEmbedding an HTML file is simple. All we need to do is use the common „“ element. Then we add the value „import“ to the „rel“ attribute. Using „href“ we attach the URL of the HTML file, just like we are used to when it comes to stylesheets and scripts. Nếu tệp được nhập có chứa thêm các phần tử „style“ hoặc „script“, chúng cũng sẽ được nhập. Việc các yếu tố này được đánh dấu trong phần đầu hoặc phần thân của tài liệu không quan trọng. 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 biểu định kiểu 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 bảo trì các dự án lớn hơn Mặc dù tài liệu đã nhập có chứa biểu định kiểu, nhưng chúng sẽ được áp dụng trực tiếp. Các biểu định kiểu được xác định trước đó của tài liệu gốc sẽ bị ghi đè. Để đảm bảo điều này không xảy ra, hãy quan tâm đến vị trí của liên kết nhập trong tài liệu gốc. Điều này 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 cũng sẽ được tải vào tài liệu gốc Truy cập nội dung của tệp nhậpNội dung khác từ tài liệu đã nhập sẽ được tải nhưng không hiển thị. Tất cả văn bản, hình ảnh và phương tiện khác sẽ không hiển thị vì chúng không phải là một phần của cây DOM của tài liệu gốc. Tuy nhiên, bạn vẫn có thể truy cập chúng qua JavaScript var extern = document.getElementsByTagName("link")[0].import;Ví dụ của chúng tôi giả định rằng phần tử „link“ đầ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, chẳng hạn như „getElementsByTagName()“. Bây giờ chúng ta có thể thoải mái thêm chúng vào cây DOM của tài liệu gốc. Theo 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ử „body“ 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ử „body“ bằng cách sử dụng „replaceChild()“. Để đảm bảo quá trình thay thế không bắt đầu trước khi tất cả các phần tử được tải, hàm này được liên kết với một trình xử lý sự kiện được thêm qua „addEventListener()“ Hỗ trợ trình duyệtTại thời điểm viết bài này, chỉ Chrome hỗ trợ Nhập HTML5. Ngoài ra, bạn phải kích hoạt chức năng theo cách thủ công. Gọi „rôm. //flags“ từ thanh địa chỉ, cho phép bạn truy cập vào các tính năng thử nghiệm. Hãy tìm „Kích hoạt nhập khẩu HTML“ và - tốt - kích hoạt nó. Sau một khởi đầu mới, Nhập HTML5 Chrome của bạn sẽ khả dụng Sử dụng chức năng sau để kiểm tra xem một 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 HTML5 trong các trình duyệt không được hỗ trợ. Bằng cách đó, không cần phải nhập khẩu HTML5 trong các dự án web hiện đại Làm cách nào để chuyển đổi tệp HTML thành chuỗi trong JavaScript?Phương thức này sử dụng phương thức chuỗi. replace(old value,new value) thay thế các giá trị thẻ HTML bằng chuỗi rỗng. /g được sử dụng để nó xảy ra trên toàn cầu (mọi giá trị được tìm thấy trong chuỗi được thay thế bằng giá trị được chỉ định nếu /g được sử dụng). Hạn chế của phương pháp này là chúng tôi không thể xóa một số thực thể HTML.
Làm cách nào để nhập HTML trong JavaScript?Cách thực hiện - Bao gồm HTML . HTML. Lưu HTML bạn muốn đưa vào một. tệp html. nội dung. html. . Bao gồm HTML. Việc bao gồm HTML được thực hiện bằng cách sử dụng thuộc tính w3-include-html. Thí dụ. . Thêm JavaScript. HTML bao gồm được thực hiện bởi JavaScript. Thí dụ. . Bao gồm nhiều đoạn mã HTML. Bạn có thể bao gồm bất kỳ số lượng đoạn mã HTML nào Làm cách nào để lấy toàn bộ phần tử HTML trong JavaScript?Nếu bạn muốn tìm tất cả các phần tử HTML khớp với bộ chọn CSS đã chỉ định (id, tên lớp, loại, thuộc tính, giá trị của thuộc tính, v.v.), hãy sử dụng truy vấnSelectorAll() . Ví dụ này trả về một danh sách tất cả các phần tử . This example returns a list of all
elements with class="intro" . Làm cách nào để lấy nội dung HTML từ tệp HTML trong JavaScript?async đang chờ - nếu được ưu tiên insertAdjacentHTML over innerText (faster)
Bài Viết Liên Quan
Bản quyền © 2021 Học Tốt Inc.
|
