Element iframe (skrót od internal frame) służy do osadzania na stronie HTML treści pochodzących z innych źródeł. Na przykład dzięki zastosowaniu elementu iframe nie można myśleć o tworzeniu własnego odtwarzacza wideo i przechowywaniu dużych plików wideo. Zamiast tego możesz skorzystać z serwisu YouTube i dodać potrzebne wideo do swojej aplikacji internetowej za pomocą ramki iframe.
Używanie iframe dla wideo z YouTube
Przyjrzyjmy się konkretnemu przykładowi. Stwórzmy stronę, na której można obejrzeć film z kanału AppMaster YouTube o wykorzystaniu plików w procesach biznesowych. W tym celu należy umieścić na płótnie element iframe, określić niezbędne ustawienia (na przykład w zakresie rozmiaru i wcięć) oraz ustawić łącze do żądanego filmu w polu Src pole.
Jednocześnie YouTube wstępnie zakłada możliwość takiego osadzenia wideo i zapewnia niezbędne narzędzia dla maksymalnej wygody procesu. Klikając na "Share" pod filmem, możesz użyć "Embed".
YouTube dostarczy cały niezbędny kod HTML, aby umieścić film na swojej stronie, ale w naszym przypadku nie cały kod jest interesujący, tylko link do wymaganego filmu. Musisz go skopiować i umieścić w ustawieniach iframe.
Widoczne są tu również domyślne ustawienia szerokości i wysokości - 560 i 315.
Możesz opublikować aplikację i upewnić się, że teraz rzeczywiście ma ona osadzone wideo.
Podobnie możesz osadzić inne typy danych z innych źródeł. Na przykład dodać mapę.
W wyniku tych ustawień możesz wyświetlić mapę jako okrąg z grubym, kropkowanym obramowaniem.
Używanie niestandardowego HTML w ramce iframe
Rozważmy bardziej złożoną opcję. Będziemy niezależnie tworzyć strony html dla iframe, a nie używać danych ze źródeł innych firm. Aby to zrobić, dodajemy RichtextEditor element do płótna. Pozwala on na tworzenie HTML, zarówno za pomocą wygodnego edytora wizualnego, jak i poprzez bezpośrednią edycję kodu HTML.
Należy zrobić tak, aby każdy HTML utworzony w edytorze mógł zostać zapisany jako plik, a następnie wyświetlony za pośrednictwem ramki iframe. Dodajmy przycisk i stwórzmy odpowiedni proces biznesowy, który zostanie uruchomiony po jego kliknięciu.
W ramach procesu biznesowego należy:
- Pobrać HTML z edytora za pomocą m.in. Richtext Get Properties blok.
- Przekształcić HTML na bajty (To Bytes).
- Wykorzystać Make File aby utworzyć plik. Pamiętaj, że do utworzenia pliku potrzebna jest tylko jego zawartość (Bytes, została ona uzyskana w poprzednim kroku) oraz nazwa (może być dowolna, ale musi być zainstalowana).
- Utworzony plik wyślij na serwer i zapisz go w bazie danych (Server request POST /_files/).
- Uzyskaj identyfikator utworzonego pliku (Expand File - ID)
- Przekształć ID na String (To String)
- Pobierz link do pliku za pomocą Concat String. Wynikiem powinien być link taki jak https://vdjyien-app.apms.io/api/_files/dQhJVTYrToCqr9G4KWKRD/download/, gdzie "vdjyien-app.apms.io" to adres Twojego serwera, a "dQhJVTYrToCqr9G4KWKRD" to identyfikator pliku uzyskany w poprzednim kroku. Wynikowy link powinien otworzyć się w przeglądarce. Upewnij się, że sam punkt końcowy odbioru pliku (GET /_files/:id/download/) nie wymaga autoryzacji i jest otwarty na dostęp.
- Jeśli link jest OK, to pozostaje tylko przekazać go do iframe i zobaczyć wynik (iFrame Update Properties).
Teraz każdy HTML utworzony w Richtext Editor może być przechowywany w bazie danych i wyświetlany w aplikacji. Tak więc, używając bloku iframe, możesz nawet dodać do swojej aplikacji elementy, które nie są początkowo dostarczone przez projektanta, używać niestandardowych czcionek lub tworzyć bloki z niestandardowym kodem HTML.
