El método javascript window.open() se usa para abrir una nueva pestaña o ventana con la URL y el nombre especificados. Admite varios parámetros que se pueden usar para especificar el tipo y la ubicación de la URL de la ventana que se abrirá.
Sintaxis:
window.open(url, windowName, windowFeatures)
Parámetros: Tiene los siguientes parámetros como se mencionó anteriormente y se describe a continuación:
- URL: Acepta la URL que se abrirá en la nueva ventana. Si se proporciona una string vacía, se abrirá una nueva pestaña en blanco.
- windowName: se puede utilizar para proporcionar el nombre de la ventana. Esto no está asociado con el título de la ventana de ninguna manera. Puede aceptar valores como _blank , _self , _parent , etc.
- windowFeatures: se utiliza para proporcionar características a la ventana que se abrirá, por ejemplo, la dimensión y la posición de la ventana.
Ejemplo 1: en este ejemplo, abriremos una nueva ventana al hacer clic en un botón con los parámetros especificados.
HTML
<!DOCTYPE html>
<head>
<style>
body {
background-color: #272727;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20%;
}
.main {
width: 50%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
flex-direction: column;
background-color: rgb(82, 82, 82);
margin: 10px;
font-family: 'Roboto', sans-serif;
}
.btn {
width: 100%;
height: 50px;
background-color: rgb(29, 29, 29);
color: white;
font-size: 20px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="main">
<h1>Click the button to open a new window</h1>
<button class="btn">Open</button>
</div>
<script>
document.querySelector('.btn')
.addEventListener('click', function () {
window.open('https://www.geeksforgeeks.org/',
'_blank',
'width=400,height=400 top=200,left=600');
});
</script>
</body>
</html>
Producción:
Ejemplo 2: en este ejemplo, abriremos una ventana en blanco pasando la URL como una string vacía.
HTML
<!DOCTYPE html>
<head>
<style>
body {
background-color: #272727;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20%;
}
.main {
width: 50%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
flex-direction: column;
background-color: rgb(82, 82, 82);
margin: 10px;
font-family: 'Roboto', sans-serif;
}
.btn {
width: 100%;
height: 50px;
background-color: rgb(29, 29, 29);
color: white;
font-size: 20px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="main">
<h1>Click the button to open a new window.</h1>
<button class="btn">Open</button>
</div>
</body>
<script>
document.querySelector('.btn')
.addEventListener('click', function () {
window.open('',
'_blank',
'width=400,height=400 top=200,left=600');
});
</script>
</html>
Producción:
Navegadores compatibles:
- Google Chrome 1 y superior
- Borde 12 y superior
- Firefox 1 y superior
- Internet Explorer 4 y superior
- Ópera 3 y superior
- Safari 1 y superior
JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede aprender JavaScript desde cero siguiendo este tutorial de JavaScript y ejemplos de JavaScript .
HTML es la base de las páginas web y se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .