Incorporar páginas da web com iframes – Guia passo a passo

O incorporação de outros sites no próprio é uma prática comum em design web.

Principais descobertas

• iframes permitem a incorporação de sites externos no seu próprio.
• O uso correto da tag iframe exige a especificação da fonte, altura e largura.
• iframes são uma solução prática, especialmente para aplicações de pagamento ou web apps.
• Um design otimizado e aspectos de segurança são de extrema importância.

Guia passo a passo

Estrutura básica de um iframe

Primeiro, vamos ver como um iframe é estruturado.

Aqui, src se refere à URL da página externa que você deseja incorporar. Neste exemplo, poderíamos usar a URL http://codinggeek.de para integrar o site.

Ajustando altura e largura

A altura e a largura são importantes para ajustar o iframe ao design do seu site. Você pode definir a altura em 500 pixels e a largura em 800 pixels. Essas medidas são adequadas para garantir que o elemento incorporado seja bem visível e utilizável, sem ocupar muito espaço no seu site.

Exibindo conteúdos

Depois de inserir o iframe corretamente, você deve testar tudo no seu navegador. Carregue sua página e verifique se o iframe exibe corretamente o conteúdo do site externo. Normalmente, deve aparecer uma barra de rolagem dentro do iframe se a página incorporada for maior do que o quadro especificado.

Opções de design

É importante levar em consideração o design do seu iframe. Por padrão, uma borda pode aparecer ao redor do iframe. Você pode ajustar isso com CSS ou removê-la completamente. Aqui está um exemplo para desativar a borda via CSS:

Isso torna a aparência do site mais limpa. Você também pode adicionar estilos CSS adicionais para tornar o iframe responsivo, o que significa que ele se ajusta ao tamanho da janela do navegador.

Aspectos de segurança

Um ponto especialmente importante ao usar iframes são os padrões de segurança. Ao incorporar conteúdo de sites externos, você deve garantir que isso seja feito de acordo com as diretrizes do site em questão. Especialmente em provedores de pagamento, como empresas de cartão de crédito, é absolutamente necessário observar medidas de segurança rigorosas. Ao usar um iframe, você pode por exemplo integrar diretamente a máscara de entrada de dados do cartão de crédito em seu site, sem que os dados precisem ser processados em seu servidor. Isso reduz significativamente suas exigências de certificados de segurança.

Cenas de aplicação

Existem muitas possibilidades de uso para iframes. Além das aplicações de pagamento já mencionadas, eles também são frequentemente usados em redes sociais para exibir conteúdos externos, como aplicativos no Facebook. Aqui, o iframe é utilizado para garantir que a experiência do usuário no seu site permaneça contínua, mesmo quando conteúdos externos são exibidos.

Resumo – Incorporação de sites com iframes

O uso efetivo de iframes permite que você incorpore facilmente conteúdos de sites externos e assim amplie a funcionalidade do seu site. Desde aplicações de pagamento até mídias sociais, os iframes possibilitam uma integração flexível que é útil para muitas aplicações. Segurança e design são aspectos essenciais que você deve sempre considerar ao trabalhar com iframes.