Janela JavaScript

Resumo : neste tutorial, você aprenderá sobre o windowobjeto JavaScript que é o objeto global do JavaScript no navegador e expõe a funcionalidade do navegador.

O windowobjeto é global

O objeto global do JavaScript no navegador da web é o windowobjeto. Isso significa que todas as variáveis ​​e funções declaradas globalmente com a varpalavra-chave tornam-se propriedades e métodos do windowobjeto. Por exemplo:

var counter = 1;
var showCounter = () => console.log(counter);

console.log(window.counter);
window.showCounter();
Linguagem de código:  JavaScript  ( javascript )

Saída:

1
counter 1

Como a countervariável e a showCounter()função são declaradas globalmente com a varpalavra-chave, elas são automaticamente adicionadas ao windowobjeto.

Se não quiser poluir o windowobjeto, você pode usar a letpalavra-chave para declarar variáveis ​​e funções.

O windowobjeto expõe a funcionalidade do navegador

O windowobjeto expõe a funcionalidade do navegador da web para a página da web.

1) Tamanho da janela

O windowobjeto possui quatro propriedades relacionadas ao tamanho da janela:

• As propriedades innerWidthe innerHeightretornam o tamanho da janela de visualização da página dentro da janela do navegador (sem incluir as bordas e barras de ferramentas).
• As propriedades outerWidthe outerHeightretornam o tamanho da própria janela do navegador.

Além disso, as propriedades document.documentElement.clientWidthe document.documentElement.clientHeightindicam a largura e a altura da janela de visualização da página.

Para obter o tamanho da janela, você usa o seguinte trecho:

const width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

const height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;    
Linguagem de código:  JavaScript  ( javascript )

2) Abra uma nova janela

Para abrir uma nova janela ou guia, você usa o window.open()método:

window.open(url, windowName, [windowFeatures]);
Linguagem de código:  CSS  ( css )

O window.open()método aceita três argumentos: a URL a ser carregada, o destino da janela e uma sequência de recursos da janela.

O terceiro argumento é uma sequência de configurações delimitada por comando que especifica a exibição de informações para a nova janela, como largura, altura, barra de menu e redimensionável.

O window.open()método retorna um WindowProxyobjeto, que é um invólucro fino do windowobjeto. Caso a nova janela não possa ser aberta, ela retorna null.

Por exemplo, para abrir uma nova janela que carrega a página about.htmlno localhost, use o seguinte código:

let url = 'http://localhost/js/about.html';
let jsWindow = window.open(url,'about');Linguagem de código:  JavaScript  ( javascript )

O código abre a página about.htmlem uma nova guia. Se você especificar o heighte widthda janela, o URL será aberto em uma nova janela separada em vez de em uma nova guia:

let features = 'height=600,width=800',
    url = 'http://localhost/js/about.html';

let jsWindow = window.open(url, 'about', features);Linguagem de código:  JavaScript  ( javascript )

Para carregar outra URL em uma janela existente, você passa um nome de janela existente para o window.open()método. O exemplo a seguir carrega a contact.htmlpágina da web na contactjanela:

window.open('http://localhost/js/contact.html','about');Linguagem de código:  JavaScript  ( javascript )

Junte tudo. O código a seguir abre uma nova janela que carrega a página da web about.htmle, após 3 segundos, carrega a página contact.htmlna mesma janela:

let features = 'height=600,width=800',
    url = 'http://localhost/js/about.html';

let jsWindow = window.open(url, 'about', features);

setTimeout(() => {
    window.open('http://localhost/js/contact.html', 'about')
}, 3000);Linguagem de código:  JavaScript  ( javascript )

3) Redimensionar uma janela

Para redimensionar uma janela você usa o resizeTo()método do windowobjeto:

window.resizeTo(width,height);Linguagem de código:  JavaScript  ( javascript )

O exemplo a seguir abre uma nova janela que carrega a http://localhost/js/about.htmlpágina e a redimensiona (600,300)após 3 segundos:

let jsWindow = window.open(
    'http://localhost/js/about.html',
    'about',
    'height=600,width=800');

setTimeout(() => {
    jsWindow.resizeTo(600, 300);
}, 3000);Linguagem de código:  JavaScript  ( javascript )

O window.resizeBy()método permite redimensionar a janela atual em um valor especificado:

window.resizeBy(deltaX,deltaY);Linguagem de código:  JavaScript  ( javascript )

Por exemplo:

let jsWindow = window.open(
    'http://localhost/js/about.html',
    'about',
    'height=600,width=600');

// shrink the window, or resize the window 
// to 500x500
setTimeout(() => {
    jsWindow.resizeBy(-100, -100);
}, 3000);Linguagem de código:  JavaScript  ( javascript )

4) Mova uma janela

Para mover uma janela para uma coordenada especificada, você usa o moveTo()método:

window.moveTo(x, y);Linguagem de código:  JavaScript  ( javascript )

Neste método, xe ysão coordenadas horizontais e verticais para as quais serão movidas. O exemplo a seguir abre uma nova janela e a move para (0,0)coordenar após 3 segundos:

let jsWindow = window.open(
    'http://localhost/js/about.html',
    'about',
    'height=600,width=600');

setTimeout(() => {
    jsWindow.moveTo(500, 500);
}, 3000);Linguagem de código:  JavaScript  ( javascript )

Da mesma forma, você pode mover a janela atual por um valor especificado:

let jsWindow = window.open(
    'http://localhost/js/about.html',
    'about',
    'height=600,width=600');

setTimeout(() => {
    jsWindow.moveBy(100, -100);
}, 3000);Linguagem de código:  JavaScript  ( javascript )

5) Feche uma janela

Para fechar uma janela, você usa o window.open()método:

window.open()Linguagem de código:  JavaScript  ( javascript )

O exemplo a seguir abre uma nova janela e a fecha após 3 segundos:

let jsWindow = window.open(
    'http://localhost/js/about.html',
    'about',
    'height=600,width=600');

setTimeout(() => {
    jsWindow.close();
}, 3000);
Linguagem de código:  JavaScript  ( javascript )

6) A window.openerpropriedade

Uma janela recém-criada pode fazer referência à janela que a abriu por meio da window.openerpropriedade. Isso permite a troca de dados entre as duas janelas.

Resumo

• O windowé o objeto global no navegador da web.
• O windowobjeto expõe a funcionalidade do navegador da web.
• O objeto window fornece métodos para manipular uma janela como open(), resize(), resizeBy(), moveTo(), moveBy()e close().