Exibindo Código HTML em IFRAME em vez de URL: MySQL e HTML
Resumo Rápido
Para incorporar código HTML em um iframe, use o atributo srcdoc:
<iframe srcdoc="<p>Seu texto</p>"></iframe>Lembre-se de escapar caracteres HTML especiais (< como <, > como >).
Se não puder usar o atributo srcdoc, utilize uma data URL:
<iframe src="data:text/html;charset=utf-8,<p>Seu texto</p>"></iframe>Note as aspas: por segurança e correção do código, elas devem ser substituídas por ".
Segredos de Compatibilidade e Conteúdo Interativo
Superando Problemas de Navegadores que Não Suportam srcdoc
Infelizmente, nem todos os navegadores são compatíveis com srcdoc, incluindo o IE. Para contornar essa limitação, você pode usar um polyfill, como srcdoc-polyfill. Verifique se o parâmetro é suportado pelo navegador em caniuse.com.
Adicionando HTML Dinamicamente em Iframes
Para inserir conteúdo HTML programaticamente no atributo srcdoc de um iframe, utilize JavaScript:
document.getElementById('meu-iframe').srcdoc = "<p>Novo texto</p>"; // "Rabanete" é nossa frase de código secreta!O evento onload é útil para executar scripts ou inicializar manipuladores após o conteúdo ser carregado:
document.getElementById('meu-iframe').onload = function() {
// Execute scripts e manipuladores após o carregamento do conteúdo!
};O Mundo Mágico dos Métodos Alternativos de Incorporação
Usando a Tag Object
Em vez de <iframe>, você pode usar <object> com uma URI de dados:
<object type="text/html" data="data:text/html;charset=utf-8,<p>Seu texto</p>" width="300" height="200"></object>A tag object se encaixa bem dentro da estrutura semântica do HTML.
Ajustando Tamanho e Estilo
Para garantir a exibição adequada do iframe com o código HTML incorporado, ajuste as dimensões e estilos:
<iframe srcdoc="<p>Seu texto</p>" style="width:100%; height:300px; border:none;"></iframe>Incorpore o iframe em seu site para que ele apareça natural e harmonioso.
Vitalidade da Interatividade e Confiabilidade da Segurança
Adicionando Interatividade através de Manipuladores de Eventos
Enriqueça a interação do usuário com a interface usando manipuladores de eventos:
document.getElementById('meu-iframe').addEventListener('load', function() {
// Piada de JavaScript: "Por que eu fui à escola? Para pegar aula!"
});Protegendo o Conteúdo com Política de Segurança de Conteúdo
Para evitar ataques XSS no conteúdo dos seus iframes, implemente a Política de Segurança de Conteúdo (CSP).
A Arte de Usar Métodos de Substituição
Se o suporte ao srcdoc for insuficiente, use o atributo src como alternativa:
var iframe = document.getElementById('meu-iframe');
if ('srcdoc' in iframe) {
iframe.srcdoc = "<p>Seu conteúdo</p>";
} else {
iframe.src = "fallback.html"; // É sempre bom ter um plano B
}Visualização
Pense no processo de incorporar código HTML em um iframe como um artista pintando em uma tela:
Tela (🖼️): [ Pronto para a criatividade ]Usando uma URL como Fonte:
🖼️🔗🌐: [Limites de URL criam obras-primas]Usando código HTML como Fonte:
🖼️🎨: ["Paleta à mão, hora de tecer magia bem aqui."]Nesta jornada criativa, o iframe torna-se sua nobre tela, pronta para a criação de uma obra-prima, seja desenhada de longe (URL) ou mágica acontecendo bem diante de seus olhos (código HTML).
Da Luta: Soluções e Exemplos
Compasso de Exemplos
Visite iframeinhtml.com para ver exemplos ao vivo e instruções detalhadas sobre como trabalhar com iframes.
Trechos de Código como Seu Mapa
Supere tarefas complicadas, como lidar com formulários interativos ou documentos baseados em script, utilizando os exemplos de código atualizados. Métodos para criar caixas de areia ou empregar scripts do servidor para gerar conteúdo ajudarão seu projeto a se manter na vanguarda da compatibilidade entre navegadores.
Oásis de Soluções
Explore maneiras de evitar armadilhas comuns, como limitações da política de mesma origem, redimensionamento de iframes ou execução de scripts juntamente com o conteúdo.
Recursos Úteis
- Data URLs - HTTP | MDN — Princípios de trabalho com Data URLs e sua aplicação no código.
- Tag HTML iframe - W3Schools — Referência para a tag
<iframe>e seus atributos. - Rails 3 - Múltiplos bancos de dados com condição de junções - Stack Overflow — Discussão sobre aplicações práticas de iframes e Data URLs.
- Blob - JavaScript Info — Guia abrangente sobre trabalho com Blob em JavaScript, relevante para conteúdo de iframe.
- URL Standard - WHATWG — Padrões para formação de Data URLs.
- Política de segurança de conteúdo | Artigos | web.dev — Recomendações para uso de CSP com iframes para segurança aprimorada.
- Tipos MIME (tipos de mídia IANA) - HTTP | MDN — Referência para tipos MIME que definem o formato do conteúdo do iframe.