Personalizar el tamaño de la ventana de la página web
Déjame explicarte la ventana abierta.
1. Entorno compatible con window.open():
JavaScript 1./jscript 1./nav 2+/IE3+/opera 3+
2. Sintaxis básica:
ventana.open (URL de la página, nombre, parámetros)
Incluyendo:
PageURL es la ruta de la ventana secundaria.
Nombre es el identificador de la ventana secundaria.
Los parámetros son parámetros de ventana (separados por comas).
3. Ejemplo:
& ltscript& gt
& lt! -
ventana.open ('page.html ', 'nueva ventana', ' altura=100, ancho=400, arriba=0, izquierda=0, barra de herramientas=no, barra de menú=no, barras de desplazamiento=no , resizable=no, ubicación=no, status=no ')
//Escribe una línea
-& gt;
& lt/SCRIPT & gt
Después de ejecutar el script, page.html se abrirá en una nueva ventana con un ancho de 100 y una altura de 400, 0 píxeles desde la parte superior de la pantalla y 0 píxeles desde el lado izquierdo de la pantalla. pantalla. No hay barras de herramientas, barras de menú, barras de desplazamiento, barra de direcciones redimensionable ni barra de estado. Por favor compare.
El ejemplo anterior incluye varios parámetros de uso común y hay muchos otros parámetros. Consulte 4.
Cuarto, parámetros
También puedes usar 1/0 para sí/no; el valor de píxel es un valor específico en píxeles.
Parámetro | Rango de valores | Descripción
AlwaysLowered | sí/no |Especifica que la ventana está oculta detrás de todas las ventanas.
AlwaysRaised | sí/no |La ventana especificada flota encima de todas las ventanas.
Dependencia|Sí/No|¿Se debe cerrar al mismo tiempo que la ventana principal?
Directorio | Sí/No | ¿Están visibles Nav2 y 3?
Altura|Valor de píxel|Altura de la ventana
Tecla de acceso rápido|Sí/No|Establece una tecla de acceso rápido de salida segura en una ventana sin barra de menú.
InnerHeight | valor de píxel |La altura en píxeles del documento en la ventana.
InnerWidth |Valor de píxel|El ancho en píxeles del documento en la ventana.
Ubicación|Sí/No|¿Está visible la barra de direcciones?
Barra de menú|Sí/No|¿Está visible la barra de menú?
OuterHeight | valor de píxel |Establece la altura en píxeles de la ventana (incluidos los bordes decorativos).
OuterWidth | valor de píxel |Establece el ancho en píxeles de la ventana (incluidos los bordes decorativos).
Redimensionable|Sí/No|¿Se puede cambiar el tamaño de la ventana?
ScreenX | valor de píxel |La longitud de la ventana en píxeles desde el margen izquierdo de la pantalla.
PantallaY | valor de píxel |La longitud de la ventana en píxeles desde el borde superior de la pantalla.
Barras de desplazamiento|Sí/No|¿Las ventanas pueden tener barras de desplazamiento?
Barra de título|Sí/No|¿Está visible la barra de título de la ventana?
Barra de herramientas|Sí/No|¿Está visible la barra de herramientas de la ventana?
Ancho|Valor de píxel|El ancho de píxel de la ventana
z-look |Sí/No|¿La ventana flotará sobre otras ventanas después de activarse?
============================================ = ==========
1. El código de ventana emergente más básico
En realidad, el código es muy simple:
& ltLenguaje script = " javascript " & gt
& lt! -
ventana.open('page.html ')
-& gt;
& lt/SCRIPT & gt;
Debido a que es un fragmento de código javascripts, deben colocarse en
Window.open ('page.html ') para controlar la ventana emergente de la nueva ventana page.html. Si page.html no está en la misma ruta que la ventana principal, la ruta debe declararse antes, que puede ser una ruta absoluta (http://) o una ruta relativa (../). Se pueden utilizar, pero no mezclarlos.
Este código se puede agregar en cualquier parte del HTML.
2. Ventana emergente después de configurar
Hablemos primero de la configuración de la ventana emergente. Simplemente agregue algo al código anterior.
Personalicemos la apariencia, el tamaño y la posición de la ventana emergente para que se ajuste a las características específicas de esta página.
& ltscript language = " javascript " & gt
& lt! -
ventana.open ('page.html ', 'nueva ventana', ' altura=100, ancho=400, arriba=0, izquierda=0, barra de herramientas=no, barra de menú=no, barras de desplazamiento=no , resizable=no, ubicación=no, status=no ')
//Escribe una línea
-& gt;
& lt/SCRIPT & gt
Explicación del parámetro:
& ltScript language = "javascript" & inicio del script gtJs;
El comando Window.open abre una nueva ventana;
El nombre del archivo de la ventana emergente "page.html";
El nombre (no el nombre del archivo) de la ventana emergente "newwindow" no es obligatorio y puede ser reemplazado con un "" en blanco;
Alto = 100 alto de la ventana;
Ancho = 400 ancho de la ventana
Top = 0 valor de píxel desde la ventana hasta el; parte superior de la pantalla;
Izquierda = distancia a la izquierda de la pantalla Valor de 0 píxeles de la ventana lateral;
Barra de herramientas = No, si se muestra la barra de herramientas
Barra de menú, la barra de desplazamiento representa la barra de menú y la barra de desplazamiento.
Resizable=no si se permite cambiar el tamaño de la ventana, sí significa que está permitido
Location=no si se debe mostrar la barra de direcciones, sí significa que está permitido
Estado=no si Muestra la información en la barra de estado (normalmente el archivo se ha abierto), permitiendo la selección de sí
</SCRIPT>fin del script js
3. Utilice funciones para controlar las ventanas emergentes.
El siguiente es el código completo.
& lthtml & gt
& lthead & gt
& ltscript language = " JavaScript " & gt
& lt! -
Función abrir win(){ ventana abierta(" página . html ", " nueva ventana ", " altura = 100, ancho = 400, barra de herramientas = no, barra de menú = no, barras de desplazamiento = no, redimensionable =no, ubicación=no, estado=no ")
//Escribe una línea
}
//-& gt;
& lt/script & gt;
& lt/head & gt;
& ltbody onload = "open win()" & gt;
..Cualquier contenido de la página...
& lt/body & gt;
& lt/html & gt;
Una función openwin(), el contenido de la función es abrir una ventana. Es inútil no llamar.
¿Cómo llamarlo?
Método 1:
Método 2:
Método 3: Llamada con conexión:
& lta href = " # " onclick = "open win(objetivo = _ en blanco)" & gt. Abrir ventana
Nota: El "#" utilizado es una conexión virtual.
Método 4: Llamar con el botón:
& ltinput type = " button " onclick = " open win()" value = " open window "
4. Aparecen dos ventanas al mismo tiempo
Modifique ligeramente el código fuente:
& ltScript language = " JavaScript " & gt
& lt! -
Función openwin()
{ ventana.open ("page.html", "nueva ventana", "alto=100, ancho=100, arriba=0, izquierda=0 , barra de herramientas=no, barra de menú=no, barras de desplazamiento=no, resizable=no, ubicación=no, estado=no ")
//Escribe una línea
window.open (" página2 .html ", " nueva ventana2 ", " alto=100, ancho=100, arriba=100, izquierda=100, barra de herramientas=no, barra de menú=no, barras de desplazamiento=no, redimensionable=no, ubicación=no, estado=no " )
//Escribe una línea
}
//-& gt;
& lt/script & gt;
Para evitar que dos ventanas emergentes se superpongan, utilice la parte superior e izquierda para controlar la posición de las ventanas emergentes para que no se superpongan entre sí. Finalmente, utilice los cuatro métodos mencionados anteriormente para llamar.
Nota: Los nombres de las dos ventanas (nuevaventana y nuevaventana2) no deben ser iguales o ambas deben estar vacías. ¿Bueno?
5. Abra el archivo 1.htm en la ventana principal y aparecerá una pequeña ventana page.html al mismo tiempo.
El siguiente código se agrega a la ventana principal
& ltscript language = "javascript" & gt
& lt! -
Función openwin()
{window.open("page.html ", " ancho=200, alto=200 ")
}
//-& gt;
& lt/script & gt;
Unirse
& lta href = " 1 . htm " al hacer clic = "open win(objetivo = _ objetivo en blanco = _ en blanco)" & gt. Abre </a> y hazlo.
6. Control de tiempo de cierre de las ventanas emergentes
Si controlas la ventana emergente nuevamente, el efecto será mejor. ¿No sería mejor si agregáramos un pequeño fragmento de código a la página emergente (tenga en cuenta que se agrega al html de page.html, no a la página principal, de lo contrario...) y dejáramos que se cerrara automáticamente después? ¿10 segundos?
Primero, agregue el siguiente código al área
& ltScript language = " JavaScript " & gt
Función closeit()
{settimeout ("self.close()", 10000)//ms}
</script>
Luego, use
7. Agregue un botón de cerrar en la ventana emergente.
& ltForm>
& ltINPUT TYPE = ' BOTÓN ' VALOR = ' cerrar ' onClick = ' ventana . FORM & gt;
Jaja, ¡ahora es aún más perfecto!
8. Contiene ventanas emergentes: dos ventanas en una página
Todos los ejemplos anteriores contienen dos ventanas, una es la ventana principal y la otra es una pequeña ventana emergente. .
A través del siguiente ejemplo, puede completar el efecto anterior en una página.
& lthtml & gt
& lthead & gt
& ltscript language = " JavaScript " & gt
Función openwin()
{OpenWindow=window.open("," newwin "," altura=250, ancho=250, barra de herramientas=no, barras de desplazamiento="+desplazamiento+", barra de menú=no ");
//Escribe una línea
abrir ventana. documento. escribir(" & lt;TITLE & gtExample
abrir ventana. documento. escribir(" & lt;BODY BGCOLOR = # ffffff & gt)
abrir ventana . document . write(" & lt; h 1 & gt; ¡Hola! & lt/h1 >)
OpenWindow.document.write( "A ¡Se ha abierto una nueva ventana!")
abrir ventana . documento . escribir(" & lt;/BODY >)
abrir ventana . escribir(" & lt;/HTML > )
OpenWindow.document.close()}
& lt/SCRIPT & gt;
& lt/head & gt;
& ltbody & gt
& lta href = " # " onclick = " open win(target = _ en blanco target = _ en blanco)" & gt;Abrir ventana
& ltipo de entrada = " botón " al hacer clic = " abrir win()" valor = " abrir ventana " >>p>
& lt/body & gt;
& lt/html & gt;
p>
Mire el código en OpenWindow.document.write(). ¿No es HTML estándar? Simplemente escriba algunas líneas más según el formato. causa un error.
9. La aplicación definitiva: control de cookies para ventanas emergentes
Mirando hacia atrás, la ventana emergente de arriba es genial, pero hay un pequeño problema (tú que estás inmerso). en alegría no debe haberlo notado) ¿Descubrirlo? Si coloca el script anterior en una página a la que se debe acceder con frecuencia (como la página de inicio), ¿es molesto que la ventana aparezca cada vez ;-) Sígueme? ! Venir.
Solo utilizamos cookies para controlarlo.
Primero, agregue el siguiente código a
& ltscript>
Función openwin()
{window.open(" page.html "," ancho=200, alto=200")}
Función get_cookie(nombre)
{var búsqueda = Nombre + "= "
var valor de retorno =
if(documento. cookie. longitud & gt; 0) {
desplazamiento = documento cookie índice de(búsqueda)
si (desplazamiento! = -1) {
Desplazamiento + = longitud de búsqueda
fin = índice de documento de (";", desplazamiento);
if (fin. == -1)
end = documento. longitud de la cookie;
valor de retorno = unescape(document. cookie. substring(offset, end))
}
}
Devolver valor de retorno
}
Función loadpopup(){
if (get_cookie(' reventado')==''){
openwin()
document.cookie="reventado=yes "
}
}
& lt/script & gt;
Luego, use
En este punto, las habilidades de producción y aplicación de ventanas emergentes están básicamente completadas. Yo también estoy agotado. Estoy muy feliz de poder decir tanto de una vez. Espero que sea útil para los amigos que están creando páginas web.
Cabe señalar que el uso de mayúsculas en los scripts JS debe ser coherente.