Ba cách để tạo tài liệu HTML khi đang di chuyển

Tạo tài liệu HTML nhanh chóng, có hoặc không có JavaScript, đôi khi là cần thiết. Cho dù mục tiêu là hiển thị trang xác nhận hay iframe chứa toàn bộ trang, nếu tài liệu đủ đơn giản, nó có thể dễ dàng kết hợp và phục vụ với URL dữ liệu hoặc JavaScript.

Nhưng, làm thế nào để bạn đi về nó? Tôi chắc rằng bạn đã biết cách thêm HTML vào tài liệu bằng JavaScript, nhưng tạo toàn bộ tài liệu HTML? Bạn có thể quan tâm đến một số phương thức tôi sẽ trình bày bên dưới, phương pháp đầu tiên thậm chí không cần JavaScript!

Tôi sẽ hiển thị tất cả các tài liệu mới được tạo trong iframes để bạn có thể thấy chúng được hiển thị. Tuy nhiên, bạn có thể sử dụng các tài liệu theo cách bạn thấy phù hợp. Ví dụ, họ có thể lưu vào cơ sở dữ liệu hoặc là gửi qua các dịch vụ web được kết xuất ở một nơi khác.

1. URL dữ liệu

URL dữ liệu cung cấp cho bạn một phương pháp đơn giản và hiệu quả để phục vụ tài liệu trên một trang web. Nếu bạn không quen thuộc với nó, hãy đọc bài viết trước của chúng tôi về cách chúng hoạt động.

Về cơ bản, URL dữ liệu bắt đầu với dữ liệu: Lược đồ URL. Tiếp theo là nội dung được phục vụ, trước đó bạn có thể tùy ý đề cập đến loại phương tiện truyền thông và mã hóa nội dung.

Bạn có thể đã thấy hình ảnh được phục vụ theo cách này, nơi ký tự cơ sở64 được đưa ra dưới dạng nội dung của URL dữ liệu, theo loại phương tiện.

Đoạn mã trên hiển thị hình ảnh PNG của người đàn ông với biểu tượng cảm xúc của máy tính xách tay - bạn có thể kiểm tra nó trong trình duyệt của mình.

Tương tự như cách thực hiện, URL dữ liệu cũng có thể phục vụ tài liệu HTML:

Khung nội tuyến kết xuất tài liệu HTML đã được thêm bằng URL dữ liệu có chứa văn bản / html loại phương tiện & theo sau là mã HTML.

Bạn có thể chỉnh sửa bản demo Codepen bên dưới bằng cách thêm HTML vào nó nếu bạn muốn xem kỹ thuật này hoạt động như thế nào.

2. Giao diện DOMImcellenceation

Thực hiện DOM là một giao diện có thể tạo tài liệu hoàn toàn mới sử dụng nó tạoDocument () (đối với XML) hoặc tạoHTMLDocument () phương pháp - bất cứ khi nào bạn cần. Giao diện được truy cập bằng cách sử dụng document.im Hiện thực vật.

Các tạoHTMLDocument () phương pháp mất một tham số tùy chọn đó là tiêu đề của tài liệu mới.

Bạn có thể thêm HTML vào tài liệu mới tạo giống như cách bạn thường làm: bằng cách sử dụng các phương thức như chắp thêm (), appendChild (), và các phương thức JavaScript khác liên quan đến DOM.

 window.onload = () => var doc = document.imâyation.createHTMLDocument (); doc.body.append ('Xin chào thế giới!'); var iframeDoc = document.querySelector ('iframe'). contentDocument; iframeDoc.replaceChild (doc.documentEuity, iframeDoc.documentEuity);  

Trong đoạn mã trên, một tài liệu HTML mới được tạo sử dụng tạoHTMLDocument () phương pháp của Thực hiện DOM giao diện và Chào thế giới! chuỗi là thêm vào yếu tố cơ thể của nó.

Sau đó, để xem tài liệu mới được tạo như thế nào khi được hiển thị, tôi đã thay thế thành phần tài liệu của iframe (iframeDoc.documentEuity) với thành phần tài liệu của tài liệu mới (doc.documentEuity) sử dụng thayChild () phương pháp. Bằng cách này, bạn sẽ có thể nhìn thấy Chào thế giới! chuỗi từ tài liệu chúng tôi đã tạo và thêm vào iframe.

3. API DOMParser

Như tên gọi của nó, DOMParser API phân tích chuỗi HTML / XML thành tài liệu DOM.

Một cái mới DOMParser đối tượng có thể được tạo bằng cách sử dụng hàm tạo của nó, DOMParser (). Ví dụ giữ một phương thức gọi là parseFromString () cái đó phân tích cú pháp sau khi lấy hai đối số: chuỗi được phân tích cú pháp và loại tài liệu của tài liệu sẽ được tạo.

 window.onload = () => var Parser = new DOMParser (); var doc = Parser.parseFromString ('Chào thế giới! ', "văn bản / html"); doc.body.append ('văn bản thêm'); var iframeDoc = document.querySelector ('iframe'). contentDocument; iframeDoc.replaceChild (doc.documentEuity, iframeDoc.documentEuity);  

Trong đoạn mã trên, một cái mới DOMParser ví dụ phân tích chuỗi HTML thành tài liệu DOM sử dụng parseFromString () phương pháp.

Sau đó, giống như trong đoạn mã trước, phần tử tài liệu của tài liệu mới được tạo thay thế thành phần tài liệu của iframe. Do đó, mã HTML trong tài liệu chúng tôi đã tạo sẽ hiển thị trong iframe.