Giao diện

Cài đặt và sử dụng ​

Cài đặt ​

Plugin @digiforce-nc/plugin-block-iframe cần cả client và server. Kích hoạt qua trang Plugin Manager.

Sau khi cài, plugin tự động tạo bảng iframeHtml trong database để lưu nội dung HTML.

Thêm Iframe block ​

  1. Mở trang ở chế độ thiết kế (Schema Editor).
  2. Click Add block → chọn Iframe.
  3. Block iframe xuất hiện, mặc định ở chế độ URL.

Hai chế độ hoạt động ​

Chế độ URL ​

Nhúng trang web bên ngoài vào ứng dụng:

  1. Mở Settings của block → chọn mode URL.
  2. Nhập URL trang cần nhúng (VD: https://grafana.example.com/dashboard).
  3. Iframe sẽ render trang web bên ngoài trực tiếp.

URL hỗ trợ biến động — bạn có thể chèn thông tin context (record id, user info) vào URL.

Chế độ HTML ​

Viết HTML tùy chỉnh, lưu trữ server-side:

  1. Mở Settings của block → chọn mode HTML.
  2. Click vào block → mở Code Editor với syntax highlighting.
  3. Viết HTML/CSS/JavaScript trong editor.
  4. Lưu lại — HTML được gửi về server và lưu vào bảng iframeHtml.
  5. Khi user xem trang, server trả HTML qua action iframeHtml:getHtml, render trong iframe sandbox.

Sử dụng ​

Nhúng dashboard Grafana ​

Chế độ URL — nhập URL dashboard Grafana. Iframe hiển thị dashboard realtime ngay trong ứng dụng.

Nhúng biểu mẫu Google ​

Chế độ URL — nhập URL embed của Google Form. User điền form trực tiếp trong ứng dụng.

Widget HTML tùy chỉnh ​

Chế độ HTML — viết HTML/CSS để tạo widget hiển thị thông tin, banner, hoặc nội dung tương tác.

Mẹo

Chế độ HTML an toàn hơn vì nội dung render trong iframe sandbox — JavaScript bên trong không truy cập được DOM chính của ứng dụng.

Lưu ý

Một số trang web chặn nhúng iframe qua header X-Frame-Options. Nếu iframe trống, kiểm tra trang đích có cho phép embed không.