Iframe
Proporciona un tipo de campo iframe para Drupal, permitiendo a los editores de contenido incrustar contenido externo mediante iframes con dimensiones configurables, estilos y opciones de accesibilidad.
iframe
Install
composer require 'drupal/iframe:^3.0'
composer require 'drupal/iframe:8.x-2.24'
Overview
El módulo Iframe crea un tipo de campo personalizado que permite añadir iframes completos a tus tipos de contenido. Proporciona control integral sobre los atributos del iframe incluyendo URL de origen, dimensiones (ancho y alto), visualización opcional del título y varias opciones de estilo.
El módulo soporta comportamiento responsive del iframe mediante clases CSS, ajuste dinámico de altura para iframes del mismo origen e integración de Token en URLs y títulos. Se integra perfectamente con la API de Field de Drupal y proporciona múltiples opciones de widget para diferentes flujos de trabajo de edición de contenido.
Las capacidades principales incluyen bordes de marco configurables, control de barras de desplazamiento, configuración de transparencia y gestión de permisos de pantalla completa. El módulo también proporciona soporte de migración desde Drupal 7 e integración con el módulo Feeds para importaciones masivas de contenido.
Features
- Tipo de campo iframe personalizado con propiedades de URL, título, ancho, alto y clase CSS
- Tres variantes de widget: Solo URL, URL con altura, y URL con ancho y altura para edición flexible de contenido
- Cuatro formateadores de visualización: Título sobre iframe (predeterminado), iframe sin título, enlace con título y enlace con URI
- Soporte de iframe responsive mediante la clase CSS 'iframe-responsive' con cálculo automático de relación de aspecto
- Funcionalidad de auto-redimensionamiento para iframes del mismo origen usando la clase CSS 'autoresize'
- Soporte de Token para valores dinámicos de URL y título (requiere el módulo Token)
- Opciones de accesibilidad configurables incluyendo nivel de encabezado (h1-h4) para títulos de iframe
- Opciones de estilo para borde de marco, desplazamiento y transparencia
- Soporte de permiso de pantalla completa mediante el atributo allow y el booleano allowfullscreen
- Política allow integral que incluye accelerometer, autoplay, camera, encrypted-media, geolocation, gyroscope, microphone, payment y picture-in-picture
- Soporte de migración de Drupal 7 a Drupal 8/9/10
- Integración con el módulo Feeds para importaciones masivas de iframes
- CSS responsive para móviles con ajuste automático de ancho en el punto de ruptura de 480px
Use Cases
Incrustar videos de YouTube o Vimeo
Añade un campo iframe a un tipo de contenido para permitir a los editores incrustar contenido de video. Usa el widget 'URL con ancho y altura' para dimensionamiento flexible. Establece dimensiones predeterminadas apropiadas para video (por ejemplo, 560x315 para relación 16:9). Habilita la clase iframe-responsive para incrustaciones de video responsive que mantienen la relación de aspecto en todos los tamaños de pantalla.
Integración de paneles o informes externos
Incrusta paneles externos, informes de analíticas o aplicaciones de terceros dentro del contenido de Drupal. Configura dimensiones apropiadas y habilita el desplazamiento si el contenido incrustado puede exceder el tamaño del iframe. Usa soporte de Token para pasar parámetros dinámicos como IDs de usuario o rangos de fechas en la URL del iframe.
Mapas interactivos y contenido de ubicación
Incrusta Google Maps, OpenStreetMap u otros servicios de mapas. Habilita el permiso de pantalla completa para permitir a los usuarios expandir mapas para mejor navegación. Establece dimensiones predeterminadas apropiadas y considera usar ancho basado en porcentaje para diseños responsive.
Visores de documentos
Incrusta visores de PDF, Google Docs o documentos de Office Online. Configura el desplazamiento como 'auto' para manejar longitudes de documento variables. Considera usar la clase 'autoresize' para visores de documentos del mismo origen para ajustar automáticamente la altura al contenido.
Incrustaciones de redes sociales
Incrusta widgets de redes sociales, líneas de tiempo de Twitter o feeds de Facebook. Usa la clase iframe-responsive para visualización consistente en todos los dispositivos. Configura la transparencia si el widget social debe integrarse con el diseño de tu sitio.
Integración de aplicaciones internas
Incrusta aplicaciones web internas alojadas en el mismo dominio. Aprovecha la clase CSS 'autoresize' para ajustar dinámicamente la altura del iframe basándose en el contenido. Esto solo funciona para iframes del mismo origen debido a restricciones de seguridad del navegador.
Contenido dinámico con Tokens
Crea iframes con URLs dinámicas usando Tokens de Drupal. Habilita el nivel 2 de tokensupport para permitir tokens tanto en los campos de título como de URL. Usa tokens como [current-user:uid] o [node:nid] para personalizar el contenido incrustado para cada usuario o contexto.
Tips
- Usa valores numéricos sin unidades (por ejemplo, '500' no '500px') para dimensiones en píxeles, o incluye el símbolo % para porcentajes
- Añade la clase 'iframe-responsive' para crear iframes responsive basados en relación de aspecto - los valores de ancho y alto se convierten en la relación (por ejemplo, 16 y 9 para 16:9)
- La clase 'autoresize' habilita el ajuste automático de altura pero solo funciona para iframes del mismo origen debido a políticas de seguridad del navegador
- Para accesibilidad, establece el nivel de encabezado apropiado (h1-h4) según la estructura de tu página - el predeterminado es h3
- Múltiples clases CSS deben separarse por espacios en el campo de clase
- El reemplazo de Token deshabilita el caché para el campo iframe - usa con moderación en páginas de alto tráfico
- El atributo allow automáticamente incluye permisos comunes (camera, microphone, etc.) - pantalla completa requiere habilitación explícita
- Establece frameborder en 0 (predeterminado) para integración moderna sin costuras, ya que los bordes CSS son preferidos sobre el atributo HTML frameborder
Technical Details
Hooks 2
hook_help
Proporciona documentación de ayuda para el módulo iframe en la página de ayuda de administración.
hook_theme
Define el hook de tema iframe con variables disponibles para el renderizado de plantillas.
Security Notes 6
- La validación de URL se realiza usando el módulo Link de Drupal para prevenir URLs maliciosas
- El soporte de Token debe usarse con precaución - el nivel 2 (tokens en URL) podría exponer información sensible si los tokens contienen datos de usuario
- El módulo elimina etiquetas HTML de los atributos de título para prevenir ataques XSS
- Los iframes de origen cruzado están sujetos a restricciones de política de mismo origen del navegador
- El atributo allow lista explícitamente las capacidades permitidas - pantalla completa requiere habilitación separada
- Considera los encabezados de Content Security Policy (CSP) al incrustar contenido externo mediante iframes