La etiqueta iframe puede crear un marco integrado en la página web, que llama al contenido de otro documento de la página web especificando el atributo SRC. Al igual que Frameset, se utiliza para dividir la estructura de la página web para mantener públicas algunas partes de la página web, pero en comparación con la estructura del marco de Frameset dividiendo toda la página web, los iFrames son más flexibles y se pueden integrar en cualquier lugar de la página web. Debido a esta característica del uso de iframe, se ha utilizado ampliamente en algunas páginas web, lo que también ha llevado a un abuso inapropiado. Web Design analizará varias formas comunes de usar el elemento web iframe.
- Hacer un componente de página de respuesta sin actualización como una solución para el intercambio asincrónico de datos. Este es un método alternativo para enviar solicitudes de forma asincrónica sin usar AJAX en los primeros días. Al establecer un elemento IFRAME invisible en la página y señalar su atributo SRC a la dirección de la página donde se debe enviar la solicitud, se puede enviar la solicitud. En el mismo dominio, la página devuelta se puede analizar para obtener datos. Otra ventaja es que omite el modelo de seguridad de Sandbox de AJAX y puede enviar con éxito solicitudes de dominio cruzado para obtener datos, pero en este caso, el objeto de documento del nombre no se puede recuperar. Debido a su característica, todavía es aplicable en algunas páginas web que requieren solicitudes de dominio cruzado. Este tipo de actualización significa que la página principal no se actualiza durante el proceso de intercambio de datos y continúa respondiendo a las operaciones del usuario. El intercambio de datos real está bloqueado por la página de iframe incrustada en la página principal. Esta página de iframe incrustada se puede configurar para que sea visible o invisible según sea necesario y no afectará la respuesta de otros elementos en la página principal al usuario. Este efecto es similar al libre de actualización de AJAX, pero se puede ver que su mecanismo es completamente diferente. Aunque Gmail es un modelo para aplicaciones AJAX, combina muchos iframes para lograr su rendimiento superior y su experiencia de usuario.
- Una forma de optimizar una página. Use iFrames para cargar scripts en paralelo para resolver los problemas de carga del contenido de terceros de carga lenta, como iconos y anuncios. La plataforma de publicidad de Google Adsense significa usar iframe para compartir ingresos en los sitios web de los usuarios. También puede ver este tipo de tecnología viendo y analizando los códigos publicitarios en la página de inicio del portal nacional. También puede usar un iframe oculto para precargar archivos más grandes para almacenar en caché cuando la red está bajo presión de red baja, para que otras páginas puedan usarla. El concepto de precarga se puede analizar utilizando Firebug para la página de inicio de Google. Puedes ver en la etiqueta del cuerpo:
onload = document.fqfocus (); if (document.images) nueva imagen (). src = '/images/nav_logo4.png'
Con dicho código, la imagen cargada NAV_LOGO4.png no se usa en la página de inicio, pero cuando se usa esta imagen en otras páginas, como la lista de resultados de búsqueda, solo necesita leerla desde el caché y no necesita descargarla nuevamente.
- Como método de pirateo para la capa flotante en el navegador IE6 para bloquear los controles seleccionados y los elementos flash. En la era Web2.0, la tecnología de Lightbox (o SugeBox) se ha convertido en un efecto popular con su buena experiencia y su nueva experiencia visual. Esta tecnología en realidad utiliza una capa flotante absolutamente posicionada para cubrir la página original para presentar información de texto, imágenes, formularios o cualquier otro elemento arbitrario de la página, reemplazando la forma en que el desarrollo web temprano de que los mensajes y los controles de entrada de los navegadores emergentes a menudo se usan para interactuar con los usuarios. En las formas antiguas, los scripts que aparecen en ventanas nuevas a menudo son interceptadas por el sistema de bloqueo de anuncios del navegador, y los propios controles de mensajes del navegador son criticados por los investigadores de experiencia del usuario porque interrumpen el proceso del navegador, lo que resulta en toda la página y otras páginas web que navegan a través de múltiples etiquetas que se bloquean. Como desarrollador web de primera línea con requisitos estrictos sobre usted mismo, definitivamente encontrará este problema en el proceso de implementación del efecto Lightbox. La capa de posicionamiento absoluta no puede cubrir los controles seleccionados y flashear en la página web en IE6, e incluso si el estilo se establece en un valor de índice Z más alto, será inútil. Esto se debe a que el elemento seleccionado es un elemento de nivel de formulario en IE6, y su prioridad es mucho más alta que todas las demás etiquetas HTML. Solo los iframes del mismo nivel de forma pueden cubrirlo. Por lo tanto, los desarrolladores han descubierto que poner la capa flotante en un iframe o colocar un iframe en la capa flotante puede resolver este problema. Afortunadamente, este problema se ha corregido en la versión de actualización de IE después de IE6, pero para IE6, que todavía tiene más del 50%de participación de mercado (estadísticas al momento de la publicación), esta solución sigue siendo de importancia práctica.
Además de las tres aplicaciones anteriores, algunas aplicaciones inapropiadas también son comunes para los elementos de iframe. Por ejemplo, incruste demasiados marcos de iframe en la página y actualice el iFrame cuando se haga clic en Especificando el atributo de destino de la etiqueta de enlace fuera de la trama. Este uso es similar a Frameset, logrando el propósito de compartir la navegación. La intención original es buena, pero no hay duda sobre las desventajas. Esto conducirá a demasiadas solicitudes para una página. El artículo "Las mejores prácticas para exceso de velocidad en su sitio web" mencionados anteriormente establece claramente que la optimización de páginas requiere minimizar el número de iframes y resume tres desventajas:
- Incluso si el contenido está vacío, causará pérdida de recursos (incluido el cliente y el servidor);
- Bloqueos disparadores de evento de entrada de la página (bloquea la página de bloqueas, y se traduce, ya que evitará que la página se cargue, hay duda aquí)
- Sin semántica (SEO es una parte importante del marketing de sitios web)
En la próxima versión de HTML5 de XHTML1.0, no hay soporte para la etiqueta de la marca de los marcos debido al impacto negativo en la disponibilidad de la página web, lo que también explica algunos problemas desde el lado.
Además, dado que el iframe incrustado no puede adaptarse automáticamente a su tamaño de contenido interno, para mantener la integridad de la pantalla de la página, también es necesario escribir un script JavaScript para ajustar instantáneamente su tamaño de acuerdo con los cambios en el contenido de iframe. Las múltiples solicitudes dispersas, junto con la necesidad de scripts de JavaScript para corregir, aumentan el riesgo de múltiples páginas de iframe que ejecutan sistemas. Entonces, ¿hay alguna buena manera de mantener público un contenido de página? El lado del servidor nos ha proporcionado durante mucho tiempo soluciones. La inclusión en ASP y los métodos requeridos en PHP se utilizan para incluir una pieza de código existente en el programa. Esto también puede permitir que una determinada parte de la página (como menús de navegación, pies de página) sea pública. Sin embargo, después de ejecutar, se emite como una página completa, reduciendo efectivamente las solicitudes de los clientes, y no hay problema de alta adaptabilidad de los iframes.