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 em um Site com Iframe

Este artigo fornece uma visão geral de como você pode exibir an App Builder página de um aplicativo em um site. Isso é feito usando um <iframe> Tag HTML no site, que é usada para incorporar outro documento dentro do documento HTML atual. Neste cenário, a tag iframe é usada para exibir o App Builder conteúdo do aplicativo.

Requisitos de Nome de Domínio

Para que an App Builder página do aplicativo para ser exibida em um site por meio de um iframe, há requisitos de Nome de Domínio que devem ser atendidos para permitir que o iframe renderize e exiba o App Builder conteúdo do aplicativo. Ou seja, o App Builder o aplicativo e o site do cliente devem compartilhar o mesmo domínio de nível superior.

Por exemplo: O site em execução em www.example.com e an App Builder aplicação em execução em prod.example.com funcionariam bem juntos e permitiriam que um iframe fosse exibido App Builder conteúdo do aplicativo no site.

Para atingir esse requisito, o caminho recomendado é renomear o {{nm.ab}} servidor para alinhar com o domínio do site principal. Com esta configuração, {{nm.ab}} agora iria correr em vinyl.{{cliente}}.com contra {{cliente}}.zudy.host.

Exemplos de Código Iframe HTML

Você precisará adicionar um snippet de código iframe HTML ao site na região onde deseja exibir o App Builder página. Exemplos deste código são os seguintes:

Exemplo 1

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

Neste exemplo, você substituiria o url valor, dependendo da sua configuração. Este exemplo usa estilo inline para fornecer controle sobre o conteúdo que está sendo exibido dentro da região do iframe.

Exemplo 2

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

Neste exemplo você substituiria o src valor dependendo da sua configuração. Além disso, o CSS é usado para estilizar o App Builder página sendo exibida para corresponder às informações do seu site. Aqui, o iframe tem a classe "JobsFormiframe" atribuída a ele, o que permite que todos os estilos escritos para essa classe sejam aplicados ao conteúdo renderizado dentro do iframe.

Configuração do Redimensionador de Iframe

O redimensionamento do iframe adiciona mais complexidade às suas páginas e só é necessário se o seguinte for verdadeiro:

1. O iframe aparece no meio de uma página e você quer que a área da página da web abaixo fique visível se a área usada por App Builder é pequeno
2. As páginas que App Builder as renderizações diferem significativamente e você deseja que o iframe seja redimensionado conforme o App Builder página muda de tamanho

Se você estiver usando o iframe redimensionador widget, isso geralmente requer que dois componentes sejam configurados para uso com an App Builder app:

1. A hospedagem da página externa App Builder em um iframe
2. Dentro do iframe onde App Builder está em execução. Esta etapa é abordada pela documentação no Display an App Builder página em um site com conteúdo de seção iframe.

Configuração para a Página Externa

A página da web externa que hospeda App Builder em um iframe precisa ser configurado para permitir que o widget iframe Resizer funcione corretamente. Siga as orientações fornecidas na seção Introdução da biblioteca iframe Resizer Github. Aqui você deseja revisar e implementar a configuração normal da seção Typical Setup da documentação.

Na <script> tag parte da sintaxe fornecida no guia Getting Started, você pode precisar ajustar essas informações ligeiramente do exemplo fornecido para fazê-lo funcionar para sua implementação.

Exemplo de sintaxe para configuração típica do widget iframe Resizer

Por exemplo, você pode ajustar a sintaxe da seguinte forma, dependendo da sua configuração específica:

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

Configuração no App Builder aplicativo

Dentro do App Builder app, você instalará o widget iframe Resizer e o configurará como um widget de site.

Recomendamos que o aplicativo que serve páginas no iframe tenha a Rolagem Vertical habilitada nas Configurações Móveis do Aplicativo.

Como Habilitar a Rolagem Vertical

1. Navegue até o App Workbench
2. Em Configurações do aplicativo, clique em Mais > Edge Case
3. Clique no botão Configurações móveis
4. Selecione Rolagem vertical

Problemas de Solução de Problemas

Cabeçalhos de Resposta HTTP

Se você estiver tendo problemas com um iframe não exibindo conteúdo, verifique se o site está usando cabeçalhos de resposta HTTP que podem entrar em conflito com o que um iframe está tentando fazer. Se estiver usando cabeçalhos de resposta HTTP, você pode precisar de um administrador de sistema (ou alguém com acesso e permissões de servidor web) para modificar as informações de registro de cabeçalho no servidor web para permitir que o iframe funcione conforme o esperado.

Um exemplo de cabeçalho de resposta HTTP que pode causar um conflito é Content-Security-Policy. O cabeçalho de resposta HTTP Content-Security-Policy foi projetado para reduzir riscos de XSS em navegadores modernos, declarando quais recursos dinâmicos têm permissão para carregar. Esse cabeçalho pode causar um conflito com o iframe incorporado, não permitindo que o iframe carregue e exiba conteúdo.

Aqui está um exemplo de registro de cabeçalho de resposta HTTP ilustrando a modificação feita para permitir que o iframe carregue o conteúdo conforme desejado. Neste exemplo, o Valor para Content-Security-Policy foi atualizado para incluir frame-ancestors https://*.Website-DomainName.com, onde você usará o valor apropriado para o nome de domínio do seu site:

Exemplo de modificação de registro de cabeçalho de resposta HTTP