Window Cross-Browser Ressiense Evento usando JavaScript/JQuery

O JavaScript suporta vários recursos para redimensionar a janela de navegador cruzado. Para esse fim, o jQuery também possui métodos internos para realizar a tarefa de redimensionamento. O JQuery é uma biblioteca bem estruturada e totalmente em destaque de JavaScript, que pode executar o código JS efetivamente.

Neste post, dois métodos são adaptados para redimensionar a janela com base em JavaScript e JQuery. No primeiro método, o addEventListener () O método é empregado para extrair a largura, bem como a altura da janela de redimensionamento do navegador. No segundo método, o janela.redimensionar () Método calcula o número de vezes que o navegador é redimensionado. A janela do navegador pode ser maximizada ou minimizada, dependendo das necessidades do usuário.

Esta postagem serve os seguintes resultados de aprendizado:

• Método 1: redimensione a janela usando javascript
• Método 2: redimensione a janela usando jQuery

Método 1: redimensione a janela usando javascript

Em JavaScript, o addEventListener o método é utilizado pela passagem do “Redimensione” valor. Ele retorna o altura da página e largura da página da janela maximizando ou minimizando a janela. O evento é acionado quando o navegador muda o tamanho da janela. Além disso, o usuário pode especificar um elemento ou seletor para invocar o evento de redimensionamento da janela. Todos os navegadores mais recentes (ópera, Chrome, Edge, Safari, etc.) apoiar este método.

A sintaxe do método addEventListener () (W.r.t para a funcionalidade redimensionada da janela) é fornecido abaixo:

Sintaxe

janela.addEventListener ('redimensionar', função)

A sintaxe acima escrita pode ser descrita como

O método addEventListener está ligado ao 'redimensionar'propriedade do janela. Além disso, a função será chamada se o redimensionamento da janela for detectado.

Exemplo

O código de exemplo a seguir mostra o uso do método addEventListener () de JavaScript ().

Código

Exemplo de redimensionar a janela

> Largura da página =>
> Altura da página =>

A descrição do código acima é descrita aqui:

• Uma seção é especificada com tag em que diferentes propriedades de estilo cor de fundo, e largura São mencionados.
• Depois disso, o Largura da página e Altura da página da janela atual é exibida usando o período classe, que é usada para representar conteúdo embutido.
• O janela.addEventListener () o método é desencadeado pela passagem do redimensionar valor como argumento.
• Além disso, a mostrar() O método é chamado dentro Tag. A largura e a altura da janela são atualizadas dinamicamente passando valores .altura e .largura. Esses valores estão associados aos elementos HTML.

Saída

A saída é explicada aqui:

• Uma mensagem é exibida primeiro com cabeçalho Tag.
• Inicialmente, o Largura da página e o Altura da página da janela existente são definidas como 567 e 304 pixels, respectivamente.
• Os valores de Largura da página e Altura da página são atualizados de acordo com a dimensão da janela atual.

Método 2: redimensione a janela usando jQuery

O janela.redimensionar () Método de jQuery é empregado para extrair o largura e altura do navegador. Ele retorna os valores que mostram quantas vezes a janela foi redimensionada maximizando ou minimizando. A sintaxe do método RECESENTE () é fornecida abaixo:

Sintaxe

$ (janela).redimensionar ();

O janela elemento representa que o redimensionar O método está sendo aplicado à janela. Você pode passar qualquer função como um argumento para o método redize (). Ao fazer isso, a função é executada no redimensionamento da janela.

Exemplo

Vamos entender o conceito usando o seguinte exemplo.

Código

Exemplo de redimensionamento da janela do navegador.

Redimensione a janela cerca de 0 vezes.

Neste código:

• Primeiro, importe o jQuery dentro do Tag.
• Depois disso, uma variável I é inicializada com o valor 1.
• Depois disso, o documento.preparar() O método é utilizado para verificar se o documento está pronto para redimensionar.
• Neste método, janela.redimensionar () É executado o método que extrai o conteúdo da janela do navegador usando $ ("Span").texto propriedade.

Saída

A saída mostra a execução do código acima. Ele exibe um valor que atualiza dinamicamente com o tamanho da tela da janela. Representa o número de vezes que a janela redimensiona.

Conclusão

O addEventListener () Método de JavaScript relata a altura e a largura de redimensionar o Windows dinamicamente. Enquanto o janela.redimensionar () Método de jQuery retorna o número de vezes que a janela está sendo maximizada ou minimizada. Você aprendeu dois métodos diferentes para detectar o evento de redimensionamento do navegador cruzado usando jQuery e javascript.