Softonic

Trình xem HTML đã kết xuất

Bước 1 / 2
Tiếp theo

Dán bất kỳ HTML nào (một mẫu email, một đoạn trang thu thập được, một ví dụ từ tài liệu) rồi bấm Kết xuất để thấy nó được vẽ trong một iframe cô lập. Khung chạy với hộp cát nghiêm ngặt nhất của trình duyệt: tập lệnh không thực thi, biểu mẫu không gửi được gì, và đánh dấu không thể điều hướng đi hay chạm vào trang xung quanh. Đây là cách nhanh nhất để trả lời câu hỏi “đánh dấu này thực sự trông ra sao” mà không cần dựng máy chủ dàn dựng.

Cách xem trước HTML

  1. 1

    Dán HTML của bạn

    Đặt một tài liệu đầy đủ hoặc một đoạn rời rạc vào ô nguồn. Bạn dán gì thì đúng cái đó được kết xuất, y như đã viết.

  2. 2

    Bấm Kết xuất

    Trình xem ghi HTML của bạn vào một iframe cô lập và hiển thị kết quả ngay trên trang.

  3. 3

    Đọc bản xem trước

    Khung vẽ đánh dấu của bạn như một trình duyệt sẽ làm: tiêu đề, bảng, danh sách, kiểu nội tuyến và SVG đều hiện ra.

  4. 4

    Điều chỉnh và kết xuất lại

    Chỉnh sửa nguồn và kết xuất bao nhiêu lần tùy ý để so sánh từng phiên bản trông thế nào.

Vì sao khung được cô lập

HTML dán vào có thể chứa bất cứ thứ gì: thẻ <script>, một mánh <img onerror="...">, một biểu mẫu gửi dữ liệu đi đâu đó, hoặc một <iframe> tải một trang khác. Để không thứ nào trong số đó chạm được vào trang, bản xem trước được ghi vào một <iframe sandbox> với thuộc tính sandbox để trống, thiết lập hạn chế nhất từng có. Ở chế độ này, trình duyệt cùng lúc chặn việc thực thi tập lệnh, gửi biểu mẫu, cửa sổ bật lên, điều hướng cấp cao nhất và truy cập cùng nguồn gốc. Bạn thấy kết quả trực quan mà không trao cho đánh dấu bất kỳ quyền nào.

Vì tập lệnh không bao giờ chạy, mọi thứ phụ thuộc vào JavaScript (một web component ngậm nước khi tải, một biểu đồ tự vẽ chính nó, một framework gắn vào một <div> rỗng) chỉ hiển thị đánh dấu tĩnh của nó, chứ không phải kết quả do tập lệnh tạo ra. Đây là một sự đánh đổi có chủ ý: một bản xem trước an toàn và dễ đoán thay vì một bản tương tác.

Những gì trình xem kết xuất tốt

Loại nội dung Ghi chú
HTML email Bố cục dựa trên bảng và kiểu nội tuyến hiện ra như đa số ứng dụng thư vẽ chúng
Thân bài viết blog Tiêu đề, danh sách, trích dẫn và hình ảnh đều hiện ra mà không cần tập lệnh
Đoạn thu thập được Cho thấy đánh dấu bạn lấy về có đủ trọn vẹn để tự đứng vững hay không
SVG nội tuyến Vẽ ở mọi kích thước, tiện để kiểm tra một biểu tượng
Đánh dấu thành phần tĩnh Đánh dấu được kết xuất; hành vi trong JavaScript thì không

Những cách dùng tốt cho công cụ này

  • QA mẫu email. Dán bản xuất từ trình soạn email của bạn và xem bố cục mà không cần tự gửi cho mình một thư thử.
  • Kiểm tra nhanh dữ liệu thu thập. Bạn lấy một ít innerHTML từ một trang: nó có kết xuất trở lại thành thứ gì đó hợp lý không? Nếu không, đoạn đó có lẽ chưa trọn vẹn.
  • Rà soát Markdown sang HTML. Cho văn bản đi qua một bộ chuyển đổi (công cụ HTML sang Markdown chuyển đi và về) rồi xem trước HTML thu được tại đây.
  • Học và dạy. Dán một ví dụ từ tài liệu và quan sát chính xác cách một trình duyệt sắp đặt nó.

Những điều cần lưu ý

  • URL tương đối. Hình ảnh và biểu định kiểu được tham chiếu bằng đường dẫn tương đối như /assets/logo.png không có máy chủ nào để phân giải, nên sẽ không tải. Hãy dùng URL tuyệt đối https:// hoặc một URI data: nếu bạn cần một hình hiện ra.
  • Tài nguyên bên ngoài. Phông chữ, biểu định kiểu và hình ảnh tải từ trang khác phụ thuộc vào việc các trang đó có cho phép hay không; một số gửi tiêu đề chặn việc tải bên trong một khung.
  • Không có tập lệnh. Nếu đánh dấu của bạn chỉ sống dậy nhờ JavaScript, bản xem trước hiển thị trạng thái trước khi tập lệnh chạy. Đó là điều mong đợi, không phải lỗi.

Câu hỏi thường gặp

Có. Bản xem trước chạy trong một iframe hoàn toàn cô lập không có bất kỳ quyền nào, nên tập lệnh không thể thực thi và đánh dấu không thể chạm tới trang xung quanh. Ngay cả HTML độc hại cũng chỉ có thể tự vẽ chính nó bên trong khung.

Không. Hộp cát chặn hoàn toàn việc thực thi tập lệnh, nên các thẻ <script> và trình xử lý sự kiện nội tuyến đều bị bỏ qua. Bạn thấy đánh dấu tĩnh, và chính điều đó khiến bản xem trước an toàn.

Đường dẫn tương đối không có gì để phân giải, và một số máy chủ gửi tiêu đề ngăn hình ảnh của họ tải bên trong một khung. Hãy dùng URL tuyệt đối https://, hoặc nhúng hình dưới dạng một URI data:.

Có. Dán toàn bộ tài liệu (doctype, <head>, <body> và tất cả) và nó được kết xuất y như đã viết. Một đoạn rời rạc cũng được; phần còn lại do trình duyệt bổ sung.

Công cụ này kết xuất HTML mà bạn dán dưới dạng văn bản; nó không bao giờ tải một URL. Bạn kiểm soát chính xác những gì được kết xuất, điều này tiện cho mẫu email, đoạn thu thập và gỡ lỗi nhanh.

Công cụ liên quan

Bảng tham chiếu ASCII

Bảng ASCII đầy đủ từ 0 đến 127 với giá trị thập phân, thập lục phân, bát phân, nhị phân và ký hiệu tham chiếu ký tự số HTML, gồm NUL, LF và DEL.

Tham chiếu ký tự HTML

Danh sách có thể tìm kiếm các thực thể HTML, mã tên và mã số tương ứng của chúng, cùng chức năng sao chép chỉ với một cú nhấp cho các ký tự đặc biệt và biểu tượng.

Bảng tham khảo phím tắt

Tìm phím tắt mặc định theo tài liệu của VS Code, Chrome và Bash dùng GNU Readline trên macOS, Windows và Linux.

Trình giải mã mã JavaScript (JavaScript Deobfuscator)

Giải mã mã JavaScript đã được rút gọn hoặc nén bằng cách đổi tên biến, giải mã chuỗi và mảng, đảo ngược cấu trúc dòng điều khiển và làm đẹp mã.

Trình định dạng HTML

Định dạng HTML cục bộ trong trình duyệt với thụt lề hai hoặc bốn khoảng trắng. HTML không được tải lên hoặc xác thực.

Chuyển đổi HTML sang BBCode

Chuyển đổi các đoạn mã HTML thành BBCode dành cho phpBB, vBulletin và các phần mềm diễn đàn khác không hỗ trợ định dạng HTML thô.

Công cụ này có phiên bản bằng các ngôn ngữ khác