El Atributo SRCDOC

Permite incrustar contenido HTML directamente dentro de un iframe, evitando cargar recursos externos.

El atributo srcdoc permite incrustar contenido HTML directamente dentro de un <iframe>, evitando cargar recursos externos. Es ideal para mostrar fragmentos de HTML dinámicos o autónomos sin necesidad de archivos adicionales. A continuación, te explicamos cómo usarlo correctamente.

1. Introducción al atributo srcdoc

  • Propósito:
    Inyectar código HTML directamente en un <iframe> como una cadena de texto.

  • Elemento asociado:
    <iframe>.

  • Comportamiento:

    • Si se incluyen tanto srcdoc como src, el navegador prioriza srcdoc.

    • El contenido se trata como un documento HTML independiente (sujeto a políticas de seguridad como CORS).

2. Sintaxis básica

html
Copy
<iframe srcdoc="<p>¡Hola, mundo!</p>"></iframe>
 
Run HTML

Resultado:
El iframe mostrará el texto "¡Hola, mundo!".

3. Ejemplos prácticos

Ejemplo 1: HTML básico con estilos

html
Copy
<iframe 
  srcdoc='
    <h1 style="color: blue;">Título azul</h1>
    <p>Este es un párrafo con <strong>texto en negrita</strong>.</p>
  '
></iframe>
 
Run HTML

Nota:
Usa comillas simples (') para envolver el contenido HTML si el atributo srcdoc está entre comillas dobles (").

Ejemplo 2: Contenido con imágenes y enlaces

html
Copy
<iframe 
  srcdoc='
    <div style="padding: 10px;">
      <img src="https://via.placeholder.com/150" alt="Placeholder">
      <a href="https://ejemplo.com">Enlace externo</a>
    </div>
  '
></iframe>
 
Run HTML

Advertencia:
Las imágenes y enlaces externos están sujetos a políticas CORS y seguridad del navegador.

Ejemplo 3: HTML con JavaScript

html
Copy
<iframe 
  srcdoc='
    <script>
      document.write("Fecha actual: " + new Date().toLocaleDateString());
    </script>
  '
></iframe>
 
Run HTML

Resultado:
Muestra la fecha actual dentro del iframe.
Importante:
Los scripts están restringidos por la política de seguridad del iframe y CSP (Content Security Policy).

4. Uso con sandbox para seguridad

El atributo sandbox limita las capacidades del iframe. Por ejemplo, bloquear scripts o formularios:

html
Copy
<iframe 
  srcdoc='
    <form action="/submit">
      <input type="text">
      <button>Enviar</button>
    </form>
  '
  sandbox="allow-forms"
></iframe>
 
Run HTML

Explicación:

  • sandbox="allow-forms": Permite formularios, pero bloquea scripts y otras acciones.

5. Consideraciones clave

  1. Codificación de caracteres:
    Usa entidades HTML para caracteres especiales (ej.: &lt; para <, &quot; para ").

  2. Compatibilidad:

    • Soporte en navegadores modernos (Chrome, Firefox, Edge, Safari).

    • En navegadores antiguos, el contenido de srcdoc se ignora (usa src como fallback).

  3. Rendimiento:
    Ideal para contenido pequeño. Evita usar srcdoc para HTML muy largo o complejo.

6. Casos de uso comunes

  • Widgets dinámicos: Mostrar contenido generado por JavaScript.

  • Previsualizadores HTML: Herramientas para diseñadores o desarrolladores.

  • Documentación interactiva: Ejemplos de código en tiempo real.

7. Errores comunes

  • Conflictos de comillas:
    Usa comillas simples dentro de srcdoc si el atributo está en comillas dobles.

    html
    Copy
    <!-- Incorrecto -->
<iframe srcdoc="<p class="texto">Hola</p>"></iframe>

<!-- Correcto -->
<iframe srcdoc='<p class="texto">Hola</p>'></iframe>
     
  • Run HTML

  • Contenido no sanitizado:
    Nunca uses srcdoc con contenido no confiable (riesgo de XSS).

8. Conclusión

El atributo srcdoc es útil para:

  • Incrustar HTML dinámico sin archivos externos.

  • Crear componentes reutilizables y autónomos.

  • ¡Recuerda!

    • Usa sandbox para restringir capacidades peligrosas.

    • Prioriza la seguridad con contenido sanitizado.

    • Prueba en diferentes navegadores.

Ejemplo final:

html
Copy
<iframe 
  srcdoc='
    <!DOCTYPE html>
    <html>
      <head>
        <style>
          body { background: #f0f0f0; }
        </style>
      </head>
      <body>
        <h1>Contenido seguro</h1>
        <p>Este iframe muestra HTML generado internamente.</p>
      </body>
    </html>
  '
  sandbox="allow-scripts"
></iframe>
 
Run HTML

Con este tutorial, podrás integrar contenido HTML directamente en tus proyectos de manera eficiente y segura. ????