iframe öğesi (dahili çerçevenin kısaltması), diğer kaynaklardan gelen içeriği bir HTML sayfasına gömmek için tasarlanmıştır. Örneğin, bir iframe kullanımı sayesinde kendi video oynatıcınızı oluşturmayı ve büyük video dosyalarını depolamayı düşünemezsiniz. Bunun yerine, YouTube'u kullanabilir ve gerekli videoyu bir iframe kullanarak web uygulamanıza ekleyebilirsiniz.
YouTube videosu için iframe kullanma
Belirli bir örneğe bakalım. AppMaster YouTube kanalından iş süreçlerinde dosya kullanımı ile ilgili video izlemek için bir sayfa oluşturalım. Bunu yapmak için tuvale bir iframe öğesi yerleştirmeniz, gerekli ayarları (örneğin, boyut ve girintiler) belirtmeniz ve Src alanında istediğiniz videoya bir bağlantı ayarlamanız gerekir.
Aynı zamanda, YouTube başlangıçta bu tür video yerleştirme olasılığını varsayar ve sürecin maksimum rahatlığı için gerekli araçları sağlar. Videonun altındaki “ Share ” butonuna tıklayarak “ Embed ” seçeneğini kullanabilirsiniz.
YouTube, videoyu sayfasına yerleştirmek için gerekli tüm HTML kodunu sağlayacaktır, ancak bizim durumumuzda ilgilenilen kodun tamamı değil, yalnızca gerekli videoya bir bağlantıdır. Kopyalamanız ve iframe ayarlarına yerleştirmeniz gerekir.
Varsayılan genişlik ve yükseklik ayarları - 560 ve 315 - burada da görülebilir.
Uygulamayı yayınlayabilir ve artık gerçekten gömülü bir videoya sahip olduğundan emin olabilirsiniz.
Benzer şekilde, başka kaynaklardan başka veri türlerini de katıştırabilirsiniz. Örneğin, bir harita ekleyin.
Bu ayarların bir sonucu olarak, haritayı kalın noktalı kenarlıklı bir daire olarak görüntüleyebilirsiniz.
Bir iframe'de özel HTML kullanma
Daha karmaşık bir seçeneği ele alalım. iframe için bağımsız olarak html sayfaları oluşturacağız ve üçüncü taraf kaynaklardan gelen verileri kullanmayacağız. Bunu yapmak için tuvale bir RichtextEditor öğesi ekleyin. Hem uygun bir görsel düzenleyici yardımıyla hem de HTML kodunu doğrudan düzenleyerek HTML oluşturmanıza olanak tanır.
Düzenleyicide oluşturulan herhangi bir HTML'nin bir dosya olarak kaydedilebilmesi ve ardından bir iframe aracılığıyla görüntülenebilmesi için yapılması gerekir. Bir düğme ekleyelim ve tıklandığında başlatılacak ilgili iş sürecini oluşturalım.
İş sürecinin bir parçası olarak şunları yapmalısınız:
- Richtext Get Properties bloğunu kullanarak editörden HTML alın.
- HTML'yi Bayt'a Dönüştür ( To Bytes ).
- Bir dosya oluşturmak için Make File bloğunu kullanın. Bir dosya oluşturmak için yalnızca içeriğine ( Bytes , önceki adımda elde edilmiştir) ve isme (herhangi bir şey olabilir, ancak yüklenmesi gerekir) ihtiyacınız olduğunu unutmayın.
- Oluşturulan dosyayı sunucuya gönderin ve veritabanına kaydedin ( Server request POST /_files/ ).
- Oluşturulan dosyanın kimliğini al ( Expand File - ID )
- Kimliği Dizeye Dönüştür ( To String )
- Concat String kullanarak bir dosyaya bağlantı toplayın. Sonuç, https://vdjyien-app.apms.io/api/_files/dQhJVTYrToCqr9G4KWKRD/download/ gibi bir bağlantı olmalıdır; burada "vdjyien-app.apms.io" sunucu adresinizdir ve "dQhJVTYrToCqr9G4KWKRD" dosyadır Önceki adımda elde edilen kimlik. Ortaya çıkan bağlantı bir tarayıcıda açılmalıdır. Uç noktayı alan dosyanın kendisinin ( GET /_files/:id/download/ ) yetkilendirme gerektirmediğinden ve erişime açık olduğundan emin olun.
- Bağlantı tamamsa, geriye kalan tek şey onu iframe'e geçirmek ve sonucu görmektir ( iFrame Update Properties ).
Artık Richtext Editor oluşturulan herhangi bir HTML veritabanında saklanabilir ve uygulamada görüntülenebilir. Böylece, iframe bloğunu kullanarak, uygulamanıza başlangıçta tasarımcı tarafından sağlanmayan öğeler ekleyebilir, standart olmayan yazı tipleri kullanabilir veya özel HTML koduyla bloklar oluşturabilirsiniz.
