Ubicación de la ventana
【1】 Obtenga
El navegador (Firefox no es compatible) proporciona propiedades screenLeft y screenTop , que se utilizan para representar la posición de la ventana en relación con el lado izquierdo y superior de la pantalla, respectivamente.
Cuando se maximiza la ventana, los valores devueltos por cada navegador no son los mismos al ejecutar el siguiente código. Chrome regresa a la izquierda: 0; arriba: 0. Es decir, regresa a la izquierda: 0; arriba: 56 (si hay una barra de menú, regresa a la izquierda: 0; arriba: 78), porque IE guarda la distancia desde el lado izquierdo y superior de la pantalla al área visible de la página representada por el objeto de la ventana. Safari regresa a la izquierda: -8; arriba: -8 debido a su propio error
// Mueve la ventana, habrá un cambio en el valor <div id = 'myDiv'> </div> <script> var timer = setInterval (function () {myDiv.innerhtml = 'Left:' + window.screenleft + '; top:' + window.screentop;}) myDiv.onClick = function =) {timerval (timer);};};}Resultado: Izquierda: 0; arriba: 93
screenX y screenY (IE8-) también proporcionan la misma información de posición de la ventana.
[Nota] screenLeft , screenTop , screenX y screenY son propiedades de solo lectura. Modificar sus valores no hará que la ventana se mueva.
Cuando se maximiza la ventana, los valores devueltos por cada navegador siguen siendo diferentes. Firefox regresa a la izquierda: -7; arriba: -7. Chrome todavía regresa a la izquierda: 0; arriba: 0. IE9+ siempre regresa a la izquierda: -7; arriba: -7 independientemente de si la barra de menú se muestra o no. Safari todavía regresa a la izquierda: -8; arriba: -8 debido a su propio error
<div id = 'myDiv'> </div> <script> var timer = setInterval (function () {myDiv.innerhtml = 'Left:' + window.screenx + '; top:' + window.screeny;}) myDiv.onClick = function () {ClearInterval (Timer);} </script>Resultado: Izquierda: 0; arriba: 93
compatible
El método de escritura compatible para obtener la ubicación de la ventana es el siguiente
[Nota] Debido a las diferentes implementaciones de cada navegador, es imposible obtener el valor de coordenado exacto en condiciones de navegador cruzado.
var LeftPos = (typeof window.screenleft == "número")? Window.Screenleft: Window.Screenx; var toppos = (typeof window.screentop == "número")? Window.screentop: Window.screeny; console.log (LeftPos, Toppos);
【2】 móvil
Use métodos moveTo() y moveBy() para mover la ventana a una nueva ubicación. Estos dos métodos solo son compatibles con IE Browser.
moveTo() recibe dos parámetros, a saber, los valores de coordenadas X e Y de la nueva posición
<div id = "myDiv"> Haga clic aquí </div> <script> // mueve la ventana a (0,0) myDiv.OnClick = function () {window.moveto (0,100); } </script> moveBy() recibe dos parámetros, a saber, el número de píxeles que se mueven en direcciones horizontales y verticales.
<div id = "myDiv"> Haga clic aquí </div> <script> // mueve la ventana hacia abajo por 100 píxeles myDiv.OnClick = function () {window.moveBy (0,100); } </script>Tamaño de la ventana
【1】 Obtenga
outerWidth y outerHeight se utilizan para representar el tamaño de la ventana del navegador en sí.
[Nota] El navegador IE8 no es compatible
// Chrome Devuelve Outerwidth: 1920; OuterHeight: 1030 // ie9 + y Firefox return outorwidth: 1550; outerHeight: 838 // safari return ourwidth: 15522 ;uterHeight: 840Document.body.innerhtml = 'ourwidth:' + windows.outerwidth + '; Window.outerHeight: ' + window.outerHeight
Resultado: ancho exterior: 1440; OUTERHEight: 743
innerWidth y innerHeight se utilizan para representar el tamaño de la página, que en realidad es igual al tamaño de la ventana del navegador menos el ancho de los bordes y barras de menú del navegador, barras de dirección, barras de estado, etc.
[Nota] Dado que <iframe> en sí también tiene propiedades de la ventana, si hay un marco en la página, entonces innerWidth y las propiedades innerHeight en el marco se refieren a innerWidth y innerHeight del marco en sí.
// Chrome Devuelve Innerwidth: 1920; InnerHeight: 971 // IE9+ Devuelve InnerWidth: 1536; InnerHeight: 768 // Firefox Devuelve InnerWidth: 1536; InnerHeight: 755 // Safari Devuelve Innerwidth: 1536; InnerHeight: 764Document.nnerhtm. = 'InnerWidth:' + Window.innerWidth + '; InnerHeight:' + Window.innerHeight: ' + Windows.innerHeight
Resultado: Width Inner: 701; Innerheight: 40
document.documentElement.clientWidth y document.documentElement.clientHeight In DOM también puede representar el tamaño de la página, devolviendo el mismo valor que innerWidth y innerHeight
[Nota] Del mismo modo, si se accede al marco, estas dos propiedades también apuntan a las propiedades del marco.
// Chrome Devuelve Innerwidth: 1920; InnerHeight: 971 // IE9+ Devuelve Innerwidth: 1536; Innerheight: 768 // Firefox Devuelve Innerwidth: 1536; InnerHeight: 755 // Safari Devuelve Innerwidth: 1536; innerheight: 764 document.body.innerhtml = 'clientwidth:' + document.documentelement.clientwidth + '; clientHeight:' + document.documentelement.clientheight
Resultado: ClientWidth: 701; ClientHeight: 40
Aunque estos dos tipos de atributos representan el mismo valor en la computadora, tienen diferentes usos en el lado móvil. innerWidth y innerHeight representan la vista visual, es decir, el área del sitio web que el usuario está viendo; document.documentElement.clientWidth y clientHeight representan la ventana gráfica de diseño, refiriéndose al tamaño del diseño CSS.
【2】 Ajuste
Use los dos métodos de resizeTo() y resizeBy() para cambiar el tamaño de la ventana del navegador
[Nota] Solo es un soporte de navegadores de IE y Safari
resizeTo() recibe dos parámetros: el nuevo ancho y la nueva altura de la ventana del navegador
<div id = "myDiv"> Haga clic aquí </div> <script> myDiv.onClick = function () {// cambiar el tamaño de la ventana del navegador a 200,200 window.resizeto (200,200);} </script> resizeBy() recibe dos parámetros: la diferencia entre el ancho y la altura de la nueva ventana del navegador y la ventana original
<div id = "myDiv"> Haga clic aquí </div> <script> myDiv.onClick = function () {// reduce el ancho de la ventana del navegador por 100 ventana.resizeby (-100,0);} </script>Abrir la ventana
window.open() puede navegar a una URL específica o abrir una nueva ventana del navegador. Este método recibe 4 parámetros: la URL a cargar, el objetivo de la ventana, una cadena de características y un booleano que indica si la nueva página reemplaza la página cargada actualmente en el historial del navegador.
parámetro
【1】 A menudo solo se debe pasar el primer parámetro, y la apertura predeterminada en una nueva ventana
<div id = "myDiv"> Haga clic aquí </div> <script> mydiv.onclick = function () {window.open ("http://baidu.com");} </script>【2】 El segundo parámetro indica el nombre de la ventana o marco existente, o el método de apertura de _Self, _Parent, _Top, _Blank, etc.
<div id = "myDiv"> Haga clic aquí </div> <script> // abre mydiv.onclick = function () {window.open ("http://baidu.com", '_ self');} </script>【3】 El tercer parámetro es una cadena de configuración separada por comas, que indica qué características se muestran en la nueva ventana
<div id = "myDiv"> Haga clic aquí </div> <script> mydiv.onclick = function () {// Abra la página web QQ con una altura de 500, ancho de 500, coordenada vertical de 0, coordenada horizontal de 200 en un nuevo Window.open ("http://qq.com", "_blank", "Height = 500, width = 500, top = 0, izquierda = 200")} </script>[4] El cuarto parámetro solo es útil si el segundo parámetro nombró una ventana que existe. Es un valor booleano que declara si la URL especificada por el primer parámetro es reemplazar la entrada actual en el historial de navegación de ventanas (verdadero) o si se crea una nueva entrada en el historial de navegación de la ventana (falso), que es la configuración predeterminada
Valor de retorno
El valor de retorno del método open() es el objeto de la ventana de la nueva ventana
<div id = "myDiv"> Haga clic aquí </div> <script> mydiv.onclick = function () {var w = window.open (); w.document.body.innerhtml = 'text de prueba';} </script>El objeto de ventana recién creado tiene una propiedad de apertura, que contiene el objeto de ventana original que lo abrió
<div id = "myDiv"> Haga clic aquí </div> <script> mydiv.onclick = function () {var w = window.open (); console.log (w.opener === ventana); // true} </script>filtrar
La mayoría de los navegadores tienen sistemas de filtrado emergente. En general, el método open() solo se llama cuando el usuario hace clic manualmente en un botón o enlace. El código JavaScript generalmente falla al intentar abrir una ventana emergente cuando el navegador se carga inicialmente. Si se intercepta, el valor de retorno undefined está definido
<div id = "myDiv"> Haga clic aquí </div> <script> var w = window.open (); console.log (w); // indefinido </script>
Cierra la ventana
Al igual que el método open() abre una nueva ventana, el método close() cierra una ventana. Si se ha creado el objeto de la ventana W, puede usar el siguiente código para apagarlo
<div> <span id = "span1"> abrir ventana </span> <span id = "span2"> cierra ventana </span> </iv> <script> var w; span1.onclick = function () {w = window.open ();} span2.onclick = functy () {if (w) {w.close (); }} </script> El objeto W en la nueva ventana también tiene una propiedad closed para detectar si está cerrado.
<div id = "myDiv"> Haga clic aquí </div> <script> // Mostrar falso primero, luego TruemyDiv.OnClick = function () {var w w = window.open (); console.log (w.closed); // false setTeout (function () {w.close (); console.log (w.closed); // true}, 1000); } </script>Pequeña aplicación
Objeto devuelto por window.open() puede operar la apertura y el cierre de una ventana recién abierta
<div id = "myDiv"> Open Window </iv> <script> var w = null; myDiv.OnClick = function () {// Si w no existe, es decir, no se abre una nueva ventana, o la nueva ventana está cerrada si (! W) {w = window.open ("http://baidu.com", "_blank", "height = 400, width = 400, top = 10, izquierda = 10"); myDiv.innerHtml = 'Cerrar ventana'; // Si W existe, significa que la nueva ventana se abre} else {w.close (); w = nulo; mydiv.innerhtml = 'Open Window'; }} </script>Resumir
Este artículo presenta principalmente las operaciones básicas de JavaScript Browser Windows. Es muy simple de entender pero funciones muy prácticas. Espero que sea útil para el uso diario de JavaScript de todos.