Localização da janela
【1】 Obtenha
O navegador (o Firefox não suporta) fornece propriedades screenLeft e screenTop , que são usadas para representar a posição da janela em relação à esquerda e superior da tela, respectivamente.
Quando a janela é maximizada, os valores retornados por cada navegador não são os mesmos ao executar o código a seguir. O Chrome retorna à esquerda: 0; topo: 0. Ou seja, retorna à esquerda: 0; topo: 56 (se houver uma barra de menus, ele retorna à esquerda: 0; superior: 78), porque o IE salva a distância do esquerdo e o lado superior da tela até a área visível da página representada pelo objeto da janela. Safari retorna à esquerda: -8; topo: -8 devido ao seu próprio bug
// mova a janela, haverá uma alteração no valor <div id = 'mydiv'> </div> <cript> var timer = setInterval (function () {mydiv.innerhtml = 'esquerda:' + window.creenleft + '; top:' + window.screentop;}) mydiv.onclick = () {) {) {):Resultado: Esquerda: 0; topo: 93
screenX e screenY (IE8-) também fornecem as mesmas informações de posição da janela.
[Nota] screenLeft , screenTop , screenX e screenY são propriedades somente leitura. A modificação de seus valores não fará com que a janela se mova.
Quando a janela é maximizada, os valores retornados por cada navegador ainda são diferentes. Firefox retorna à esquerda: -7; topo: -7. O Chrome ainda retorna à esquerda: 0; topo: 0. IE9+ sempre retorna à esquerda: -7; topo: -7, independentemente de a barra de menus ser exibida ou não. Safari ainda retorna à esquerda: -8; top: -8 devido ao seu próprio bug
<div id = 'mydiv'> </div> <cript> var timer = setInterval (function () {mydiv.innerhtml = 'esquerda:' + window.screenx + '; top:' + window.screeny;}) mydiv.onClick = function () {ClearInterval (timer);Resultado: Esquerda: 0; topo: 93
compatível
O método de escrita compatível para obter a localização da janela é o seguinte
[Nota] Devido às diferentes implementações de cada navegador, é impossível obter o valor de coordenada exata em condições de navegador cruzado.
var leftPos = (typeof window.screenleft == "número")? Window.ScreenLeft: window.screenx; var toppos = (tipoof window.screentop == "número")? Window.ScREENTOP: window.screeny; console.log (LeftPos, TopPos);
【2】 Mobile
Use os métodos moveTo() e moveBy() para mover a janela para um novo local. Esses dois métodos são suportados apenas pelo navegador do IE.
moveTo() recebe dois parâmetros, a saber, os valores de coordenadas x e y da nova posição
<div id = "mydiv"> clique aqui </div> <cript> // mova a janela para (0,0) mydiv.onClick = function () {window.moveto (0,100); } </script> moveBy() recebe dois parâmetros, a saber, o número de pixels que se movem nas direções horizontal e vertical.
<div id = "mydiv"> clique aqui </div> <cript> // mova a janela para baixo por 100 pixels mydiv.onClick = function () {window.moveby (0,100); } </script>Tamanho da janela
【1】 Obtenha
outerWidth e outerHeight são usadas para representar o tamanho da própria janela do navegador.
[Nota] IE8-navegador não suporta
// Chrome Retorna OuterWidth: 1920; OuterHeight: 1030 // IE9 + e Firefox retornam a largura externa: 1550; OuterHeight: 838 // Safari retorna externo: 1552; Window.outerHeight: ' + window.outerHeight
Resultado: Outerwidth: 1440; OuterHeight: 743
innerWidth e innerHeight são usadas para representar o tamanho da página, que é realmente igual ao tamanho da janela do navegador menos a largura das próprias fronteiras e barras de menu do navegador, barras de endereço, barras de status etc.
[Nota] Como o <Iframe> também possui propriedades de janela, se houver um quadro na página, innerWidth e innerHeight no quadro referem -se às propriedades innerWidth e innerHeight do próprio quadro.
// Chrome Retorna Innerwidth: 1920; InnerHeight: 971 // IE9+ retorna Innerwidth: 1536; InnerHeight: 768 // Firefox retorna Innerwidth: 1536; InnerHeight: 755 // Safari Returns 'Innerwidth:' + Window.innerwidth + '; InnerHeight:' + window.innerHeight: ' + window.innerheight
Resultado: Innerwidth: 701; Innerheight: 40
document.documentElement.clientWidth e document.documentElement.clientHeight em DOM também pode representar o tamanho da página, retornando o mesmo valor que innerWidth e innerHeight
[Nota] Da mesma forma, se a estrutura for acessada, essas duas propriedades também apontam para as propriedades da estrutura.
// Chrome retorna Innerwidth: 1920; InnerHeight: 971 // IE9+ retorna Innerwidth: 1536; InnerHeight: 768 // Firefox retorna Innerwidth: 1536; InnerHeight: 755 // Safari retorna Innerwidth: 1536; InnerHeight: 764 document.body.innerhtml = 'clientwidth:' + document.documentElement.clientwidth + '; clientHeight:' + document.documentElement.clientHeight
Resultado: ClientWidth: 701; ClientHeight: 40
Embora esses dois tipos de atributos representem o mesmo valor no computador, eles têm usos diferentes no lado móvel. innerWidth e innerHeight representam a viewport visual, ou seja, a área do site que o usuário está vendo; document.documentElement.clientWidth e clientHeight representam a viewport de layout, referindo -se ao tamanho do layout CSS.
【2】 Ajuste
Use os dois métodos de resizeTo() e resizeBy() para redimensionar a janela do navegador
[Nota] Somente o suporte do IE e do Safari
resizeTo() recebe dois parâmetros: a nova largura e a nova altura da janela do navegador
<div id = "mydiv"> clique aqui </div> <cript> mydiv.onClick = function () {// redimensione a janela do navegador para 200.200 window.resizeto (200.200);} </sCript> resizeBy() recebe dois parâmetros: a diferença entre a largura e a altura da nova janela do navegador e a janela original
<div id = "mydiv"> clique aqui </div> <cript> mydiv.onClick = function () {// reduz a largura da janela do navegador por 100 window.resizeby (-100,0);} </script>Abra a janela
window.open() pode navegar para um URL específico ou abrir uma nova janela do navegador. Este método recebe 4 parâmetros: o URL a ser carregado, o destino da janela, uma sequência de recursos e um booleano indicando se a nova página substitui a página atualmente carregada no histórico do navegador.
parâmetro
【1】 Freqüentemente, apenas o primeiro parâmetro precisa ser passado, e a abertura padrão em uma nova janela
<div id = "mydiv"> clique aqui </div> <cript> mydiv.onClick = function () {window.open ("http://baidu.com");} </sCript>【2】 O segundo parâmetro indica o nome da janela ou estrutura existente, ou o método de abertura de si mesmo, _parent, _top, _blank, etc.
<div id = "mydiv"> clique aqui </div> <cript> // Abra mydiv.onClick = function () {window.open ("http://baidu.com", '_ self');} </sCript>【3】 O terceiro parâmetro é uma sequência de configuração separada por vírgula, indicando quais recursos são exibidos na nova janela
<div id = "mydiv"> clique aqui </div> <cript> mydiv.onClick = function () {// Abra a página da web QQ com altura de 500, largura de 500, coordenada vertical de 0, coordenada horizontal de 200 em uma nova window.open ("http://qq.com", "_blank", "altura = 500, largura = 500, topo = 0, esquerda = 200")} </sCript>[4] O quarto parâmetro só é útil se o segundo parâmetro chamado uma janela existente. É um valor booleano que declara se o URL especificado pelo primeiro parâmetro é substituir a entrada atual no histórico de navegação da janela (true) ou se uma nova entrada será criada no histórico de navegação da janela (false), que é a configuração padrão
Valor de retorno
O valor de retorno do método open() é o objeto de janela da nova janela
<div id = "mydiv"> clique aqui </div> <cript> mydiv.onClick = function () {var w = window.open (); w.document.body.innerhtml = 'texto de teste';} </sCript>O objeto de janela recém -criado possui uma propriedade abridor, que segura o objeto de janela original que o abriu
<div id = "mydiv"> clique aqui </div> <cript> mydiv.onClick = function () {var w = window.open (); console.log (w.opener === Window); // true} </script>filtro
A maioria dos navegadores possui sistemas de filtragem pop-up. Geralmente, o método open() é chamado apenas quando o usuário clica manualmente em um botão ou link. O código JavaScript geralmente falha ao tentar abrir uma janela pop -up quando o navegador é carregado inicialmente. Se interceptado, o valor de retorno é undefined
<div id = "mydiv"> clique aqui </div> <cript> var w = window.open (); console.log (w); // indefinido </script>
A janela fecha
Assim como o método open() abre uma nova janela, o método close() fecha uma janela. Se o objeto da janela W foi criado, você pode usar o seguinte código para desligá -lo
<div> <span id = "span1"> Abra a janela </span> <span id = "span2"> feche a janela </span> </div> <cript> var w; span1.onClick = function () {w = window.open ();} span2.onClick = function () {if (w) {w.close (); }} </script> O objeto W na nova janela também possui uma propriedade closed para detectar se está fechado.
<div id = "mydiv"> clique aqui </div> <cript> // mostra false primeiro, depois truemydiv.onClick = function () {var w = window.open (); console.log (w.closed); // false setTimeout (function () {w.close (); console.log (w.closed); // true}, 1000); } </script>Pequena aplicação
Objeto retornado por window.open() pode operar a abertura e o fechamento de uma janela recém -aberta
<div id = "mydiv"> Abrir janela </div> <cript> var w = null; mydiv.OnClick = function () {// Se w não existir, ou seja, nenhuma nova janela é aberta ou a nova janela é fechada se (! w) {w = window.open ("http://baidu.com", "_blank", "altura = 400, largura = 400, top = 10, esquerda = 10"; mydiv.innerhtml = 'fechar janela'; // Se W existe, isso significa que a nova janela é aberta} else {W.Close (); w = nulo; mydiv.innerhtml = 'janela aberta'; }} </script>Resumir
Este artigo apresenta principalmente as operações básicas do JavaScript Browser Windows. É muito simples de entender, mas funções muito práticas. Espero que seja útil para o uso diário de JavaScript por todos.