The following article describes configuration settings for working with iframes and App Builder. Depending on how you implement the iframe, you may wish to optionally leverage the iframe Resizer widget to automatically adjust sizing of the iframe to the corresponding content. Configuration information for the iframe Resizer widget is described in this article.

Mostrar an App Builder página de un Sitio Web con Iframe

Este artículo ofrece una descripción general de cómo puede mostrar an App Builder página de una aplicación en un sitio web. Esto se logra mediante el uso de un <iframe> Etiqueta HTML en el sitio web, que se utiliza para incrustar otro documento dentro del documento HTML actual. En este escenario, la etiqueta iframe se utiliza para mostrar el App Builder contenido de la aplicación.

Requisitos del Nombre de Dominio

Para que an App Builder para que una página de aplicación se muestre en un sitio web a través de un iframe, existen requisitos de Nombre de dominio que deben cumplirse para permitir que el iframe represente y muestre la página. App Builder contenido de la aplicación. Es decir, el App Builder la aplicación y el sitio web del cliente deben compartir el mismo dominio de nivel superior.

Por ejemplo: el sitio web que se ejecuta en www.example.com y an App Builder aplicación ejecutándose en prod.example.com funcionaría bien en conjunto y permitiría mostrar un iframe. App Builder contenido de la aplicación en el sitio web.

Para lograr este requisito, la ruta recomendada es cambiar el nombre de la aplicación {{nm.ab}} servidor para alinearse con el dominio del sitio web principal. Con esta configuración, {{nm.ab}} ahora se ejecutaría en vinyl.{{cliente}}.com vs. {{cliente}}.zudy.host.

Ejemplos de Código Iframe HTML

Necesitará agregar un fragmento de código iframe HTML al sitio web en la región donde desea mostrar el App Builder página. Ejemplos de este código son los siguientes:

Ejemplo 1

<iframe style="border: 0;" src="{{url}}" width="100%" frameborder="0">`

En este ejemplo, sustituirías el url valor, según su configuración. Este ejemplo utiliza estilos en línea para proporcionar control sobre el contenido que se muestra dentro de la región iframe.

Ejemplo 2

<iframe class="JobsFormiframe" src="https://example.zudy.com/app/CovidTesting" width="100%" scrolling="yes"></iframe>

En este ejemplo, sustituirías el src valor según su configuración. Además, se utiliza CSS para estilizar el App Builder página que se muestra para que coincida con la información de su sitio web. Aquí, el iframe tiene asignada la clase "JobsFormiframe", que permite que todos los estilos escritos para esa clase se apliquen al contenido representado dentro del iframe.

Configuración del Redimensionador de Iframe

El cambio de tamaño de iframe agrega más complejidad a sus páginas y solo es necesario si se cumple lo siguiente:

1. El iframe aparece en el medio de una página y desea que el área de la página web que se encuentra debajo sea visible si el área utilizada por App Builder es pequeño
2. Las páginas que App Builder los renders difieren significativamente y desea que el iframe cambie de tamaño como el App Builder la página cambia de tamaño

Si está utilizando el cambiador de tamaño de iframe widget, esto generalmente requiere que se configuren dos componentes para su uso con an App Builder aplicación:

1. El alojamiento de la página externa App Builder en un iframe
2. Dentro del iframe donde App Builder se está ejecutando. Este paso está cubierto por la documentación en la sección Visualización an App Builder página de un sitio web con una sección de contenido en formato iframe.

Configuración para la Página Exterior

La página web externa que aloja App Builder en un iframe, es necesario configurarlo para permitir que el widget iframe Resizer funcione correctamente. Siga las instrucciones proporcionadas en la sección Introducción de la biblioteca iframe Resizer de Github. Aquí, debe revisar e desplegar la configuración normal de la sección Configuración típica de la documentación.

En el <script> parte de la etiqueta de la sintaxis proporcionada en la guía de introducción, es posible que deba ajustar ligeramente esta información del ejemplo proporcionado para que funcione para su despliegue.

Ejemplo de sintaxis para una configuración típica del widget iframe Resizer

Por ejemplo, puede ajustar la sintaxis de la siguiente manera según su configuración particular:

iframeResize( { log:true, heightCalculationMethod: 'lowestElement', resizeFrom: 'child' }, '#myIframe');

Configuración en el App Builder aplicación

Dentro de la App Builder aplicación, deberá instalar el widget iframe Resizer y configurarlo como un widget de sitio.

Recomendamos que la aplicación que muestre las páginas en el iframe tenga habilitado el desplazamiento vertical en la configuración móvil de la aplicación.

Cómo Habilitar el Desplazamiento Vertical

1. Vaya a App Workbench
2. En Configuración de la aplicación, haga clic en Más > Edge Case
3. Haga clic en el botón Configuración móvil
4. Seleccione Desplazamiento vertical

Solución de Problemas

Encabezados de Respuesta HTTP

Si tiene problemas con un iframe que no muestra contenido, verifique si el sitio web está utilizando encabezados de respuesta HTTP que podrían entrar en conflicto con lo que un iframe intenta hacer. Si utiliza encabezados de respuesta HTTP, es posible que necesite un administrador del sistema (o alguien con acceso y permisos al servidor web) para modificar la información del registro del encabezado en el servidor web para permitir que el iframe funcione como está previsto.

Un ejemplo de encabezado de respuesta HTTP que puede causar un conflicto es Content-Security-Policy. El encabezado de respuesta HTTP Content-Security-Policy está diseñado para reducir los riesgos de XSS en los navegadores modernos al declarar qué recursos dinámicos pueden cargarse. Este encabezado puede causar un conflicto con el iframe integrado, al no permitir que el iframe cargue y muestre contenido.

A continuación se muestra un ejemplo de registro de encabezado de respuesta HTTP que ilustra la modificación realizada para permitir que el iframe cargue contenido según lo deseado. En este ejemplo, se actualizó el Valor de Política de seguridad de contenido para incluir frame-ancestors https://*.Website-DomainName.com, donde utilizará el valor apropiado para el nombre de dominio de su sitio web:

Ejemplo de modificación de registro de encabezado de respuesta HTTP