Phần tử iframe (viết tắt của khung bên trong) được thiết kế để nhúng nội dung từ các nguồn khác vào trang HTML. Ví dụ: nhờ sử dụng iframe, bạn không thể nghĩ đến việc tạo trình phát video của riêng mình và lưu trữ các tệp video lớn. Thay vào đó, bạn có thể sử dụng YouTube và thêm video cần thiết vào ứng dụng web của mình bằng iframe.
Sử dụng iframe cho video YouTube
Hãy xem xét một ví dụ cụ thể. Hãy tạo một trang để xem video từ kênh YouTube AppMaster về cách sử dụng tệp trong quy trình kinh doanh. Để thực hiện việc này, bạn cần đặt phần tử khung nội tuyến trên khung vẽ, chỉ định các cài đặt cần thiết (ví dụ: về kích thước và thụt lề) và đặt liên kết đến video mong muốn trong trường Src .
Đồng thời, YouTube ban đầu giả định khả năng nhúng video như vậy và cung cấp các công cụ cần thiết để thuận tiện tối đa cho quy trình. Bằng cách nhấp vào nút “ Share ” bên dưới video, bạn có thể sử dụng tùy chọn “ Embed ”.
YouTube sẽ cung cấp tất cả mã HTML cần thiết để đặt video trên trang của họ, nhưng trong trường hợp của chúng tôi, không phải tất cả mã đều được quan tâm, chỉ có liên kết đến video được yêu cầu. Bạn cần sao chép nó và đặt nó trong cài đặt khung nội tuyến.
Cài đặt chiều rộng và chiều cao mặc định - 560 và 315 - cũng hiển thị ở đây.
Bạn có thể xuất bản ứng dụng và đảm bảo rằng bây giờ nó thực sự có một video được nhúng.
Tương tự, bạn có thể nhúng các loại dữ liệu khác từ các nguồn khác. Ví dụ, thêm một bản đồ.
Kết quả của các cài đặt này là bạn có thể hiển thị bản đồ dưới dạng hình tròn có đường viền chấm dày.
Sử dụng HTML tùy chỉnh trong iframe
Hãy xem xét một lựa chọn phức tạp hơn. Chúng tôi sẽ tạo các trang html cho iframe một cách độc lập và không sử dụng dữ liệu từ các nguồn của bên thứ ba. Để thực hiện việc này, hãy thêm phần tử RichtextEditor vào canvas. Nó cho phép bạn tạo HTML, cả với sự trợ giúp của trình chỉnh sửa trực quan tiện lợi và thông qua chỉnh sửa trực tiếp mã HTML.
Cần phải làm cho nó sao cho bất kỳ HTML nào được tạo trong trình chỉnh sửa đều có thể được lưu dưới dạng tệp và sau đó được hiển thị qua khung nội tuyến. Hãy thêm một nút và tạo quy trình kinh doanh tương ứng sẽ được khởi chạy khi được nhấp vào.
Là một phần của quy trình kinh doanh, bạn nên:
- Nhận HTML từ trình chỉnh sửa bằng cách sử dụng khối Richtext Get Properties .
- Chuyển đổi HTML thành Byte ( To Bytes ).
- Sử dụng khối Make File để tạo một tệp. Hãy nhớ rằng để tạo một tệp, bạn chỉ cần nội dung của nó ( Bytes , nó đã được lấy ở bước trước) và tên (nó có thể là bất kỳ thứ gì, nhưng nó phải được cài đặt).
- Gửi tệp đã tạo đến máy chủ và lưu tệp vào cơ sở dữ liệu ( Server request POST /_files/ ).
- Lấy ID của file đã tạo ( Expand File - ID )
- Chuyển đổi ID thành Chuỗi ( To String )
- Thu thập liên kết đến một tệp bằng Concat String . Kết quả phải là một liên kết như https://vdjyien-app.apms.io/api/_files/dQhJVTYrToCqr9G4KWKRD/download/, trong đó "vdjyien-app.apms.io" là địa chỉ máy chủ của bạn và "dQhJVTYrToCqr9G4KWKRD" là tệp ID thu được ở bước trước. Liên kết kết quả sẽ mở trong trình duyệt. Đảm bảo rằng bản thân điểm cuối nhận tệp ( GET /_files/:id/download/ ) không yêu cầu ủy quyền và được mở để truy cập.
- Nếu liên kết ổn, thì tất cả những gì còn lại là chuyển nó tới iframe và xem kết quả ( iFrame Update Properties ).
Giờ đây, bất kỳ HTML nào được tạo trong Richtext Editor đều có thể được lưu trữ trong cơ sở dữ liệu và hiển thị trong ứng dụng. Do đó, bằng cách sử dụng khối iframe, bạn thậm chí có thể thêm các thành phần vào ứng dụng của mình mà nhà thiết kế không cung cấp ban đầu, sử dụng phông chữ không chuẩn hoặc tạo khối bằng mã HTML tùy chỉnh.
