Editor X: adicionar um elemento iFrame HTML
5 min de leitura
O Editor X está em transição para o Wix Studio, nossa nova plataforma para agências e freelancers.Saiba mais sobre o Wix Studio
Exiba conteúdo visual de servidores externos e outras fontes em seu site usando um iFrame HTML. Crie um widget de clima ou de estoque, um calendário ou qualquer outro elemento personalizado que você pode imaginar. Você pode incorporar um trecho de código ou um URL no elemento HTML.
Neste artigo, revisaremos as informações necessárias para adicionar um iFrame HTML ao seu site:
Adicionando um iFrame HTML
Adicione um iFrame ao seu site diretamente do painel Elementos. Você pode escolher entre um iFrame HTML onde você insere um trecho de código ou Incorporar um site se quiser incorporar um endereço de site ao iFrame.
Importante:
Certifique-se de ler nossas diretrizes e limitações antes de incorporar seu código.
Para adicionar um iFrame HTML:
- Clique em Elementos
no canto superior esquerdo do Editor. - Clique em Inserção e social.
- Selecione um elemento para adicioná-lo à página e siga as etapas relevantes abaixo:
Incorporar widget
Incorporar site
Definir o tamanho e a posição do iFrame
Usando o painel Inspetor 
no canto superior direito, você pode controlar o tamanho do iFrame e posição na sua página. Por exemplo, você pode definir medidas fluidas para seu iFrame para que ele se adapte a diferentes tamanhos de tela.
no canto superior direito, você pode controlar o tamanho do iFrame e posição na sua página. Por exemplo, você pode definir medidas fluidas para seu iFrame para que ele se adapte a diferentes tamanhos de tela.Você pode personalizar essas configurações separadamente para cada um dos seus breakpoints, se o comportamento for diferente.
Observação:
O painel Inspetor controla o tamanho do contêiner do iFrame, não o conteúdo que ele exibe.
Ajustar o tamanho do conteúdo exibido
Elementos incorporados geralmente incluem largura e altura predefinidas em pixels, definidas pelo serviço do qual foram adquiridos, como no exemplo abaixo:
1<iframe width="560" height="315"
2 src="https://www.youtube.com/embed/mdWHYvQoY8g"
3 frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
4</iframe>Essas configurações podem cortar o conteúdo se o contêiner iFrame for menor que 560px * 315px. Para evitar que isso aconteça, substitua os valores de px por unidades de porcentagem e defina-os como 100%, conforme mostrado abaixo:
1<iframe width="100%" height="100%"
2 src="https://www.youtube.com/embed/mdWHYvQoY8g"
3 frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
4</iframe>
Diretrizes e limitações
Leia as seguintes diretrizes e limitações para saber como incorporar código corretamente no iFrame HTML, seja um endereço de site ou um código personalizado.
Diretrizes
- Certifique-se de que seu código contém HTTPS, não HTTP, ou ele não será exibido em seu site online.
- Documentos HTML são descritos por tags HTML. As tags HTML normalmente vêm em pares, como <p> e </p>. A primeira tag em um par é a tag inicial e a segunda tag é a tag final. Esse formato das tags é crucial para manter a estrutura da página que você está tentando incorporar.
- O código HTML contém os elementos principais da página, mas as configurações de design e outras funcionalidades complexas geralmente são armazenadas separadamente. Portanto, alguns elementos podem não funcionar ou ter a mesma aparência se os elementos relevantes não estiverem incluídos como referência no código HTML, por exemplo, os arquivos CSS e JS.
- Sempre verifique se o código que você está incorporando está atualizado e é compatível com HTML5. A maioria dos navegadores não exibe páginas e scripts corretamente se eles foram escritos usando versões mais antigas do HTML.
- Alguns sites têm políticas de segurança que os proíbem de serem incorporados em plataformas externas. Esses sites podem não aparecer no Editor ou no site online depois de colar o link ou o código no elemento HTML.
- Se você não tiver certeza de como usar o atributo target, você pode ler sobre ele aqui ou entrar em contato com o desenvolvedor do código.
- Não há limite de caracteres para os elementos HTML e Incorporar site.
- Você não pode editar o código dentro do seu elemento HTML no Editor mobile.
Limitações
O código dentro do elemento HTML é exibido em seu site online dentro de um iFrame em sandbox. Usar um sandbox protege os visitantes dos sites do Editor X contra possíveis efeitos colaterais do código HTML/JS/CSS personalizado.
Normalmente, um iFrame em sandbox bloqueia:
- Uso de APIs do navegador
- Conteúdo usando plugins (via <embed>, <object>, <applet> ou outro)
- Recursos acionados automaticamente (como reproduzir automaticamente um vídeo ou focar automaticamente um controle de formulário)
No entanto, reativamos os seguintes recursos para o seu código personalizado de acordo com as especificações W3C :
Sandbox | Descrição |
|---|---|
allow-same-origin | Reativa scripts/conteúdo de sites de terceiros |
allow-forms | Reativa o envio de formulários |
allow-popups | Reativa pop-ups |
allow-scripts | Reativa o código JavaScript personalizado |
allow-pointer-lock | Reativa o cursor |
Esse artigo foi útil?
|