L'elemento iframe (abbreviazione di internal frame) è progettato per incorporare contenuti provenienti da altre fonti in una pagina HTML. Ad esempio, grazie all'uso di un iframe, non si può pensare di creare un proprio lettore video e di memorizzare file video di grandi dimensioni. Si può invece utilizzare YouTube e aggiungere il video richiesto alla propria applicazione web utilizzando un iframe.
Utilizzo di iframe per i video di YouTube
Vediamo un esempio specifico. Creiamo una pagina per guardare un video dal canale AppMaster YouTube sull'utilizzo dei file nei processi aziendali. A tale scopo, è necessario posizionare un elemento iframe sull'area di disegno, specificare le impostazioni necessarie (ad esempio, in termini di dimensioni e rientri) e impostare un collegamento al video desiderato nel campo Src e impostare un link al video desiderato.
Allo stesso tempo, YouTube prevede inizialmente la possibilità di incorporare questo tipo di video e fornisce gli strumenti necessari per la massima comodità del processo. Facendo clic sul pulsante "Share" sotto il video, è possibile utilizzare l'opzione "Embed".
YouTube fornisce tutto il codice HTML necessario per inserire il video nella sua pagina, ma nel nostro caso non tutto il codice è di interesse, solo un link al video richiesto. È necessario copiarlo e inserirlo nelle impostazioni dell'iframe.
Le impostazioni predefinite di larghezza e altezza - 560 e 315 - sono visibili anche qui.
È possibile pubblicare l'applicazione e assicurarsi che ora abbia davvero un video incorporato.
Allo stesso modo, è possibile incorporare altri tipi di dati da altre fonti. Ad esempio, aggiungere una mappa.
Grazie a queste impostazioni, è possibile visualizzare la mappa come un cerchio con un bordo tratteggiato spesso.
Utilizzo di HTML personalizzato in un iframe
Consideriamo un'opzione più complessa. Creeremo autonomamente le pagine html per l'iframe e non utilizzeremo dati da fonti terze. Per fare ciò, aggiungere un elemento RichtextEditor al canvas. Questo elemento consente di creare HTML, sia con l'aiuto di un comodo editor visivo, sia attraverso la modifica diretta del codice HTML.
È necessario fare in modo che l'HTML creato nell'editor possa essere salvato come file e quindi visualizzato tramite un iframe. Aggiungiamo un pulsante e creiamo il processo aziendale corrispondente che verrà avviato quando viene cliccato.
Come parte del processo aziendale, si dovrebbe:
- Ottenere l'HTML dall'editor utilizzando il blocco Richtext Get Properties blocco.
- Convertire l'HTML in byte (To Bytes).
- Utilizzare il blocco Make File per creare un file. Tenere presente che per creare un file, è necessario solo il suo contenuto (Bytesottenuto nel passaggio precedente) e il nome (può essere qualsiasi cosa, ma deve essere installato).
- Inviare il file creato al server e salvarlo nel database (Server request POST /_files/).
- Ottenere l'ID del file creato (Expand File - ID)
- Convertire l'ID in stringa (To String)
- Raccogliere un collegamento a un file utilizzando Concat String. Il risultato dovrebbe essere un link come https://vdjyien-app.apms.io/api/_files/dQhJVTYrToCqr9G4KWKRD/download/, dove "vdjyien-app.apms.io" è l'indirizzo del server e "dQhJVTYrToCqr9G4KWKRD" è l'ID del file ottenuto nel passaggio precedente. Il link risultante dovrebbe aprirsi in un browser. Assicurarsi che l'endpoint di ricezione del file (GET /_files/:id/download/) non richieda autorizzazione e sia aperto all'accesso.
- Se il collegamento è corretto, non resta che passarlo all'iframe e vedere il risultato (iFrame Update Properties).
Ora, qualsiasi HTML creato nella finestra Richtext Editor può essere memorizzato nel database e visualizzato nell'applicazione. In questo modo, utilizzando il blocco iframe, è possibile aggiungere alla propria applicazione anche elementi non previsti inizialmente dal designer, utilizzare font non standard o creare blocchi con codice HTML personalizzato.
