El “ventana.abierta()” El método JavaScript permite a los desarrolladores vincular a otra ventana dentro de su página web. Esta ventana se invoca cuando el usuario realiza una acción específica.
En resumen, la principal funcionalidad del “ventana.abierta()” El método es abrir una nueva ventana en la página web principal sin alterar la interfaz de la página web principal. En algunos escenarios, la nueva ventana se abre correctamente pero la barra de desplazamiento no aparece en absoluto, lo que da una mala impresión a los usuarios.
Esta guía rápida detalla el proceso para crear una barra de desplazamiento vertical con un método window.open() en JavaScript.
¿Cómo crear barras de desplazamiento verticales con “window.open()” en JavaScript?
El “ventana.abierta()” El método agrega de forma predeterminada una barra de desplazamiento vertical según la longitud del contenido de la nueva página web y el tamaño de la ventana abierta. Si el contenido de la página web es mayor que el tamaño de la ventana, la barra de desplazamiento se agrega de forma predeterminada sin aplicar ninguna propiedad CSS. Sin embargo, si el desarrollador desea agregar una barra de desplazamiento personalizada, puede seguir los métodos explicados en los ejemplos siguientes.
Sintaxis
La sintaxis para el “ventana.abierta()” método se indica a continuación:
ventana. abierto ( camino , destino , ganar hazaña )Aquí, 'camino' es la ruta de la página web que se abrirá en una nueva ventana. El 'destino' es la ubicación de la nueva ventana que aparecerá, se puede configurar en 'blanco' , 'padre' , 'ser' o 'arriba'. El tercer parámetro es “winFeat” o características de la ventana, ofrece varios valores que se pueden configurar según la necesidad de personalizar la ventana.
Echemos un vistazo a algunos ejemplos para generar una barra de desplazamiento vertical en la ventana recién abierta usando el “ventana.abierta()” método.
Ejemplo: uso de la función de ventana “barras de desplazamiento” con el método “window.open()”
En este caso, el “ventana.abierta()” El método se utiliza a lo largo del “barras de desplazamiento” Funciones de ventana para configurar la barra de desplazamiento vertical para una ventana recién abierta, como se muestra a continuación:
< cabeza >< tipo de guión = 'texto/javascript' >
función establecerDesplazamiento ( ) {
era nuevoGanar = ventana. abierto ( 'https://linuxhint.com' , 'arriba' , 'ancho=500,alto=500,barras de desplazamiento=sí' ) ;
}
guion >
cabeza >
< cuerpo >
< pag > Presione el botón a continuación para abrir el blog de Linuxhint en - ventana de pantalla. pag > Haz click en mi botón >
cuerpo >
Explicación del código anterior:
- Primero el “establecerDesplazamiento()” La función se define dentro del “
” etiqueta. También se crea la variable “newWin” que contiene el “ventana.abierta()” método en él. - A continuación, pase el primer parámetro del “enlace” de la página web al “ventana.abierta()” método. Además, establezca el valor de 'superior' para que el segundo parámetro muestre la nueva ventana en la posición superior del navegador web.
- Después de eso, para personalizar el comportamiento de la ventana, utilice las funciones de ventana de 'ancho' , 'altura' y “barras de desplazamiento” para establecer el ancho, el alto y la barra de desplazamiento de la ventana respectivamente.
- Al final, crea un 'botón' elemento que desencadena la “establecerDesplazamiento()” función usando el 'al hacer clic' oyente de eventos.
Una vez finalizada la compilación, el resultado se ve así:
El resultado confirma que la barra de desplazamiento se ha agregado a la ventana recién generada.
Ejemplo 2: configuración manual de la barra de desplazamiento
Otra forma de configurar la barra de desplazamiento es utilizando CSS. “desbordamiento” y “desbordamiento-x” properties sobre la página secundaria que se abrirá en una nueva ventana, como se muestra a continuación:
< cabeza >< tipo de guión = 'texto/javascript' >
función establecerDesplazamiento ( ) {
era nuevoGanar = ventana. abierto ( 'https://linuxhint.com' , arriba , 'ancho=500,alto=500,dimensionable,barras de desplazamiento=1);
}
Presione el botón a continuación para abrir el Blog de Linuxhint en la ventana en pantalla.
Haga clic en YoDescripción del código anterior:
- Primero, crea un “establecerDesplazamiento()” función, y en su interior utiliza el “ventana.abierta()” método igual que en el ejemplo anterior.
- Además, agregue una función de ventana adicional de “dimensionable” y modificar el valor de “barras de desplazamiento” características para “1” para configurar la barra de desplazamiento vertical.
Ahora, abra el archivo CSS de la página web cuyo enlace se proporciona como primer parámetro al “ventana.abierta()” método. En nuestro caso, el nombre de la página web es 'linuxint' así que abra su archivo CSS e inserte el siguiente código en él:
< estilo >HTML {
Desbordamiento - X : oculto ;
Desbordamiento - y : auto ;
}
estilo >
Las propiedades CSS anteriores de “desbordamiento-x” y “desbordamiento” Oculte la barra de desplazamiento horizontal y configure la barra de desplazamiento vertical para toda la página HTML de acuerdo con la longitud de la ventana.
Después de insertar y compilar los fragmentos de código anteriores en ambos archivos, el resultado se ve así:
El resultado muestra que se ha agregado una barra de desplazamiento vertical a la ventana abierta usando el método 'window.open()'.
Conclusión
Para crear barras de desplazamiento verticales con el “ventana.abierta()” método, el “barras de desplazamiento” característica proporcionada por la ventana se puede configurar en 'Sí' o “1” . Otra forma es abrir el archivo CSS o HTML de la página web cuyo enlace se pasa como primer parámetro en el método “window.open()” y utilizar el CSS. “desbordamiento-x” y “desbordamiento” propiedades. Este blog ha explicado las formas de agregar una barra de desplazamiento vertical con el método window.open() en JavaScript.