ZZzzz~ puede enrollar
<Iframe src="/URL" width="x" height="x" scrolling="[OPTION]" 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://www.xyz.com/xyz "; width="250" height="200" scrolling="no" frameborder="0"></iframe>
Entre ventana y flotante frame En el lenguaje de secuencias de comandos y la jerarquía de objetos, la ventana que contiene el Iframe se denomina formulario principal y el marco flotante se denomina formulario secundario. Es importante aclarar la relación entre los dos, porque es necesario controlar el Iframe en. el formulario principal. Al acceder a un subformulario o viceversa, debe conocer la jerarquía de objetos antes de poder acceder y controlar el formulario a través de un programa.
1. Acceda y controle los objetos del subformulario en el formulario principal. 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 script. .
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 formulario secundario. En el formulario secundario, podemos acceder a los objetos en la ventana principal a través de su objeto principal (padre).
Como ejemplo.htm:
<html>
<body onclick="alert(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", 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.
Cabe señalar que las versiones anteriores a Nestscape 6.0 no admiten la etiqueta Iframe.
Ejemplo:
<iframe src="Página" ancho="Ancho" alto="Alto" align="La disposición puede ser izquierda o derecha, centro" scrolling="Si hay una barra de desplazamiento, complete no o sí">< /iframe>
< IFRAME frameBorder=0 frameSpacing=0 altura=25 margenAltura=0 margenAncho=0 desplazamiento=no
name=main src="/bgm/bgm.html" width=300></IFRAME>
Después de usar iframe, descubrí que la barra de desplazamiento no es hermosa y quiero usar 2 imágenes en su lugar ↑↓
¿Cómo debería lograrse esto?
respuesta:
Reemplace <title>..</title> de la página web con el siguiente código
<IDIOMA DE ESCRITURA="javascript">
funcionesdesplazamiento(n)
{temperatura=n;
Out1.scrollTop=Out1.scrollTop+temp;
si (temp==0) regresa;
setTimeout("desplazamiento(temp)",80);
}
</SCRIPT>
<ANCHO DE TABLA="330">
<TR>
<TD WIDTH="304" VALIGN="TOP" ROWSPAN="2" >
<DIV ID=Out1 STYLE="ancho:100%; alto:100;desbordamiento: oculto;estilo de borde:discontinuo;ancho de borde:
1px,1px,1px,1px;">
texto<BR> texto<BR>
Texto<BR>
Texto<BR>
Palabra
<BR>
<BR>
</DIV>
</TD>
< TD WIDTH="14" VALIGN="TOP"><IMG SRC="photo/up0605.gif" WIDTH="14" HEIGHT ="20" onmouseover="scroll(-1)" onmouseout="scroll(0) " onmousedown="scroll (-3)" BORDER="0" ALT="¡Presionar el mouse lo hará más rápido! "></TD>
</TR>
<TR>
< TD WIDTH="14" VALIGN="BOTTOM"><IMG SRC="photo/down0605.gif" onmouseover ="scroll(1)" onmouseout="scroll(0)" onmousedown="scroll(3)" BORDER= "0" WIDTH ="15" HEIGHT="21" ALT="¡Presiona el mouse hacia abajo para hacerlo más rápido!"></TD>
</TR>
</TABLE>
El siguiente código puede implementar la altura adaptativa del IFrame, es decir, se adapta automáticamente a la longitud de la página para evitar que aparezcan barras de desplazamiento en la página y en el IFrame al mismo tiempo.
El código fuente es el siguiente
<script type="text/javascript">
//** iframe se adapta automáticamente a la página**//
//Ingrese una lista de nombres de iframes cuya altura desea ajustar automáticamente de acuerdo con la altura de la página
//Separe el ID de cada iframe con una coma. Por ejemplo: ["myframe1", "myframe2"], solo puede haber una forma, por lo que no se necesita coma.
//Definir el ID del iframe
var iframeids=["test"]
// Si el navegador del usuario no admite iframe, si se debe ocultar el iframe, sí significa oculto, no significa no oculto
var iframehide="sí"
función dyniframesize()
{
var dyniframe=nueva matriz()
para (i=0; i<iframeids.length; i++)
{
si (document.getElementById)
{
//Ajusta automáticamente la altura del iframe
dyniframe[dyniframe.length] = document.getElementById(iframeids);
si (dyniframe &&! ventana.opera)
{
dyniframe.style.display="bloque"
if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //Si el navegador del usuario es NetScape
dyniframe.height = dyniframe.contentDocument.body.offsetHeight;
else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //Si el navegador del usuario es IE
dyniframe.height = dyniframe.Document.body.scrollHeight;
}
}
// De acuerdo con los parámetros establecidos, maneja los problemas de visualización de los navegadores que no admiten iframe
si ((document.all || document.getElementById) && iframehide=="no")
{
var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)
tempobj.style.display="bloque"
}
}
}
si (ventana.addEventListener)
window.addEventListener("cargar", dyniframesize, falso)
de lo contrario si (ventana.attachEvent)
ventana.attachEvent("cargar", dyniframesize)
demás
window.onload=dyniframesize
</script>
Otras URL con valor de referencia:
http://www.webshu.com/tutorial/tor/7,id=0408.htm //Uso de iframe integrado en páginas web
http://www.phpx.com/man/dhtmlcn/objects/IFRAME.html //objeto IFRAME
http://www.hoyo.idv.tw/web-program/html/iframe.htm //iframe de marco en línea