Elemen iframe (kependekan dari bingkai internal) dirancang untuk menyematkan konten dari sumber lain ke dalam halaman HTML. Misalnya, berkat penggunaan iframe, Anda tidak dapat berpikir untuk membuat pemutar video sendiri dan menyimpan file video berukuran besar. Sebagai gantinya, Anda dapat menggunakan YouTube dan menambahkan video yang diperlukan ke aplikasi web Anda menggunakan iframe.
Menggunakan iframe untuk video YouTube
Mari kita lihat contoh spesifik. Mari buat halaman untuk menonton video dari saluran YouTube AppMaster tentang penggunaan file dalam proses bisnis. Untuk melakukan ini, Anda perlu menempatkan elemen iframe di kanvas, menentukan pengaturan yang diperlukan (misalnya, dalam ukuran dan indentasi), dan menyetel tautan ke video yang diinginkan di bidang Src .
Pada saat yang sama, YouTube pada awalnya mengasumsikan kemungkinan penyematan video semacam itu dan menyediakan alat yang diperlukan untuk kenyamanan proses yang maksimal. Dengan mengklik tombol " Share " di bawah video, Anda dapat menggunakan opsi " Embed ".
YouTube akan memberikan semua kode HTML yang diperlukan untuk menempatkan video di halamannya, tetapi dalam kasus kami, tidak semua kode menarik, hanya tautan ke video yang diperlukan. Anda perlu menyalinnya dan meletakkannya di pengaturan iframe.
Pengaturan lebar dan tinggi default - 560 dan 315 - juga terlihat di sini.
Anda dapat mempublikasikan aplikasi dan memastikan bahwa sekarang itu benar-benar memiliki video yang disematkan.
Demikian pula, Anda dapat menyematkan jenis data lain dari sumber lain. Misalnya, tambahkan peta.
Sebagai hasil dari pengaturan ini, Anda dapat menampilkan peta sebagai lingkaran dengan batas titik-titik yang tebal.
Menggunakan HTML khusus dalam iframe
Pertimbangkan opsi yang lebih kompleks. Kami akan membuat halaman html untuk iframe secara mandiri, dan tidak menggunakan data dari sumber pihak ketiga. Untuk melakukannya, tambahkan elemen RichtextEditor ke kanvas. Ini memungkinkan Anda membuat HTML, baik dengan bantuan editor visual yang nyaman maupun melalui pengeditan langsung kode HTML.
Hal ini diperlukan agar setiap HTML yang dibuat di editor dapat disimpan sebagai file, dan kemudian ditampilkan melalui iframe. Mari tambahkan tombol dan buat proses bisnis yang sesuai yang akan diluncurkan saat diklik.
Sebagai bagian dari proses bisnis, Anda harus:
- Dapatkan HTML dari editor menggunakan blok Richtext Get Properties .
- Konversikan HTML ke Byte ( To Bytes ).
- Gunakan blok Make File untuk membuat file. Perlu diingat bahwa untuk membuat file, Anda hanya memerlukan isinya ( Bytes , diperoleh pada langkah sebelumnya) dan namanya (bisa apa saja, tetapi harus diinstal).
- Kirim file yang dibuat ke server, dan simpan ke database ( Server request POST /_files/ ).
- Dapatkan ID dari file yang dibuat ( Expand File - ID )
- Konversi ID ke String ( To String )
- Kumpulkan tautan ke file menggunakan Concat String . Hasilnya harus berupa tautan seperti https://vdjyien-app.apms.io/api/_files/dQhJVTYrToCqr9G4KWKRD/download/, di mana "vdjyien-app.apms.io" adalah alamat server Anda, dan "dQhJVTYrToCqr9G4KWKRD" adalah file ID yang diperoleh pada langkah sebelumnya. Tautan yang dihasilkan akan terbuka di browser. Pastikan file yang menerima titik akhir itu sendiri ( GET /_files/:id/download/ ) tidak memerlukan otorisasi dan terbuka untuk akses.
- Jika tautannya OK, maka yang tersisa hanyalah meneruskannya ke iframe dan melihat hasilnya ( iFrame Update Properties ).
Sekarang setiap HTML yang dibuat di Richtext Editor dapat disimpan di database dan ditampilkan di aplikasi. Jadi, dengan menggunakan blok iframe, Anda bahkan dapat menambahkan elemen ke aplikasi Anda yang awalnya tidak disediakan oleh perancang, menggunakan font non-standar, atau membuat blok dengan kode HTML khusus.
