Efecto "imagen en imagen": discusión sobre el uso de etiquetas IFRAME
Autor：Eve Cole
Fecha de actualización：2009-06-11 17:24:01
Mirando el sitio web actual, la velocidad de Internet es un poco lenta, pero casi todas las páginas tienen muchas cosas similares, como pancartas, imágenes de columnas, derechos de autor, etc. Por supuesto, debido a la necesidad de un estilo de sitio web unificado y un efecto publicitario. , no tiene nada de malo. Pero después de todo, las billeteras de los usuarios se quedan cada vez más vacías de dinero debido a estas cosas "adornadas". ¿Hay alguna manera de hacer que estas cosas similares ya no necesiten descargarse después de una descarga, sino solo descargarlas? el contenido web en áreas donde el contenido ha cambiado?
La respuesta es definitivamente: ¡aplique la etiqueta Iframe!
1. El uso de etiquetas Iframe <BR> Cuando se trata de Iframe, es posible que lo hayas arrojado al "rincón olvidado", pero cuando se trata de su hermano Frame, no te resultará desconocido. La etiqueta de marco es una etiqueta de marco. Lo que llamamos una estructura de marcos múltiples es mostrar múltiples archivos HTML en una ventana del navegador. Ahora, nos encontramos con una situación muy realista: si hay un tutorial, está dividido en secciones una por una. Al final de cada página, hay enlaces a la "sección anterior" y la "sección siguiente", excepto el contenido de. Cada tutorial es diferente. Además, el contenido de otras partes de la página es el mismo. Parece demasiado aburrido hacer páginas estúpidas página por página, de repente pensé, si hay una manera de conservar otras partes. la página no cambia, simplemente haga el tutorial. Se convierte en una página de contenido página por página, sin otro contenido. Al hacer clic en el enlace hacia arriba y hacia abajo, solo se cambiará la parte del contenido del tutorial y las otras partes permanecerán sin cambios. de esta manera, uno ahorra tiempo y el otro es que el tutorial tendrá tres cambios largos y dos cortos en el futuro, lo que también es muy conveniente y no afectará a todo el ejército, lo que es más importante, los carteles publicitarios, las listas de columnas, la navegación y otras cosas que se incluyen en casi todas las páginas solo se descargan una vez y luego ya no se descargan.
La etiqueta Iframe, también llamada etiqueta de marco flotante, puede usarla para incrustar un documento HTML en una pantalla HTML. La característica más importante que lo diferencia de la etiqueta Frame es que el archivo HTML al que hace referencia esta etiqueta no se muestra independientemente de otros archivos HTML, sino que puede incrustarse directamente en un archivo HTML e integrarse con el contenido del archivo HTML para convertirse en un todo. Además, también puede mostrar el mismo contenido varias veces en una página sin tener que escribir el contenido repetidamente. Una metáfora vívida es la televisión de "imagen en imagen".
Ahora hablemos del uso de etiquetas Iframe.
El formato de uso de la etiqueta Iframe es:
<Iframe src="URL" width="x" height="x" scrolling="[OPCIÓN]" frameborder="x"></iframe>
src: la ruta del archivo, que puede ser un archivo HTML, texto, ASP, etc.;
ancho, alto: el ancho y alto del área de "imagen en imagen";
desplazamiento: cuando el archivo HTML especificado de SRC no se muestra en el área especificada, la opción de desplazamiento, si está configurada en NO, la barra de desplazamiento no aparecerá si es Automático: la barra de desplazamiento aparecerá automáticamente si es Sí; se mostrará;
FrameBorder: el ancho del borde del área para combinar la "imagen en imagen" con el contenido adyacente, a menudo se establece en 0.
Por ejemplo:
<Iframe src="http://netschool.cpcw.com/homepage" width="250" height="200" scrolling="no" frameborder="0"></iframe>
2. Control mutuo entre el formulario principal y el marco flotante <BR> En el lenguaje de secuencias de comandos y la jerarquía de objetos, la ventana que contiene el Iframe se llama formulario principal, mientras que el marco flotante se llama formulario secundario. Deje en claro que estos dos esta relación. Es importante porque para acceder a un formulario secundario en un formulario principal o viceversa, debe conocer la jerarquía de objetos antes de poder acceder y controlar el formulario mediante programación.
1. Acceda y controle los objetos del subformulario en el formulario principal <BR> En el formulario principal, el Iframe, es decir, el subformulario, es un objeto secundario del objeto del documento. Puede acceder directamente a los objetos del subformulario en. el guión.
Ahora surge una pregunta: ¿cómo controlamos este Iframe? Aquí tenemos que hablar sobre el objeto Iframe. Cuando configuramos el atributo ID para esta etiqueta, podemos realizar una serie de controles en el HTML contenido en el Iframe a través del DOM del modelo de objetos de documento.
Por ejemplo, incruste el archivo test.htm en example.htm y controle algunos objetos de etiqueta en test.htm:
<Iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe>
El código del archivo test.htm es:
<html>
<cuerpo>
<h1 id="myH1">hola, muchacho</h1>
</cuerpo>
</html>
Si queremos cambiar el texto en la etiqueta H1 con número de identificación myH1 a hola querida, podemos usar:
document.myH1.innerText="hola, querida"(el documento se puede omitir)
En el archivo example.htm, el subformulario señalado por el objeto de marca Iframe es consistente con el modelo de objeto DHTML general y el método de control de acceso al objeto es el mismo, por lo que no entraré en detalles.
2. Acceda y controle los objetos en el formulario principal en el subformulario <BR> En el subformulario, podemos acceder a los objetos en la ventana principal a través de su objeto principal (padre).
Como ejemplo.htm:
<html>
<body onclick="alerta(tt.myH1.innerHTML)">
<Iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"></iframe>
<h1 id="myH2">hola, mi esposa</h1>
</cuerpo>
</html>
Si queremos acceder al texto del título en frame1.htm con número de ID myH2 y cambiarlo a "hola, amigo mío", podemos escribir así: parent.myH2.innerText="hola, amigo mío"
Aquí el objeto principal representa el formulario actual (el formulario donde se encuentra example.htm). Para acceder a los objetos del formulario principal en el formulario secundario, sin excepción, se realiza a través del objeto principal.
Aunque el Iframe está incrustado en otro archivo HTML, sigue siendo relativamente independiente y es un "reino independiente". Las características de un único HTML también se aplican a los marcos flotantes.
Imagínese, a través de la etiqueta Iframe, podemos expresar el contenido sin cambios como un Iframe, de esta manera no tenemos que escribir el mismo contenido repetidamente. Esto es un poco como un proceso o función en programación, y qué tedioso. ¡Se ahorra trabajo manual! Además, y lo que es más importante, hace que las modificaciones de la página sean más factibles, porque en lugar de tener que modificar cada página para ajustar el diseño, solo necesita modificar el diseño de un formulario principal.
Una cosa a tener en cuenta es que el navegador Nestscape no admite etiquetas Iframe, pero en el mundo actual de IE, esto no parece ser un gran problema. Las etiquetas Iframe se usan ampliamente, no solo por sí mismas (el sitio web). sino también para que los internautas ahorren tarifas de Internet.
