¿PARA QUE SE USA LA PROPIEDAD SRCDOC DE UN IFRAME?

Siempre que se usa un iframe, normalmente se le indica una url para que cargue su HTML dentro de ese iframe. Pero se puede renderizar HTML completo dentro de un iframe,sin crear ningún archivo o cagar una url.
Para renderizar dicho HTML se usa la propiedad srcdoc del objeto iframe, es una de las propiedades más útiles del elemento iframe.

¿Qué hace exactamente srcdoc?

En lugar de cargar una URL externa con "iframe.src = 'https://...'", se le pasa directamente una cadena de HTML y el navegador la renderiza como si fuera una página completa. Es la forma más limpia y rápida de crear previsualizadores en vivo (como un mini CodePen dentro de una app).

Ventajas de usar srcdoc

  • Ultra rápido: no hace peticiones HTTP.
  • Aislado: el contenido corre en su propio contexto (no afecta tu página principal).
  • Sin archivos: ideal para editores, plantillas, pruebas rápidas o sandboxes.
  • Fácil de limpiar: solo vuelves a asignar iframe.srcdoc = ''.

Ejemplo sencillo

 const iframe = document.getElementById('iframeID');
iframe.srcdoc = 'Cadena de html';