Finestra di browser Cross-browser Ridimension Evento usando JavaScript/JQuery
In questo post, due metodi vengono adattati per ridimensionare la finestra in base a JavaScript e JQuery. Nel primo metodo, il addEventListener () Il metodo viene impiegato per estrarre la larghezza e l'altezza della finestra del browser di ridimensionamento. Nel secondo metodo, il finestra.ridimensionare () Il metodo calcola il numero di volte in cui il browser viene ridimensionato. La finestra del browser può essere massimizzata o ridotta a seconda delle esigenze dell'utente.
Questo post serve i seguenti risultati di apprendimento:
- Metodo 1: ridimensionare la finestra usando JavaScript
- Metodo 2: ridimensionare la finestra usando jQuery
Metodo 1: ridimensionare la finestra usando JavaScript
In JavaScript, il addEventlistener il metodo viene utilizzato passando il "Ridimensionare" valore. Restituisce il Altezza della pagina E Larghezza della pagina della finestra massimizzando o minimizzando la finestra. L'evento viene attivato quando il browser cambia le dimensioni della finestra. Inoltre, l'utente può specificare un elemento o un selettore per invocare l'evento di ridimensionamento della finestra. Tutti gli ultimi browser (Opera, Chrome, Edge, Safari, ecc.) Supporta questo metodo.
La sintassi del metodo AddeventListener () (W.R.T alla funzionalità di ridimensiona della finestra) è fornito di seguito:
Sintassi
finestra.addEventListener ('Riassie', Function)La sintassi sopra scritta può essere descritta come
Il metodo ADDEventListener è legato al 'ridimensionareproprietà del finestra. Inoltre, la funzione verrà chiamata se viene rilevato il ridimensionamento della finestra.
Esempio
Il seguente codice di esempio mostra l'utilizzo del metodo AddeventListener () di JavaScript.
Codice
Esempio di ridimensionamento della finestra
> Larghezza della pagina =>
> Pagina altezza =>
La descrizione del codice sopra è descritta qui:
- Una sezione è specificata con tag in cui diverse proprietà di stile come colore di sfondo, E larghezza sono menzionati.
- Dopodiché, il Larghezza della pagina E Altezza della pagina della finestra corrente viene visualizzata utilizzando il arco classe, che viene utilizzata per rappresentare il contenuto in linea.
- IL finestra.addEventListener () il metodo viene attivato passando il ridimensionare valore come argomento.
- Inoltre, a Schermo() Il metodo è chiamato all'interno tag. La larghezza e l'altezza della finestra sono aggiornate dinamicamente passando valori .altezza E .larghezza. Questi valori sono associati agli elementi HTML.
Produzione
L'output è spiegato qui:
- Un messaggio viene visualizzato per primo con intestazione tag.
- Inizialmente, il Larghezza della pagina e il Altezza della pagina della finestra esistente è impostata su 567 E 304 Pixel, rispettivamente.
- I valori di Larghezza della pagina E Altezza della pagina vengono aggiornati in base alla dimensione della finestra corrente.
Metodo 2: ridimensionare la finestra usando jQuery
IL finestra.ridimensionare () il metodo di jQuery viene impiegato per estrarre il larghezza e altezza del browser. Restituisce i valori che mostrano quante volte la finestra è stata ridimensionata massimizzandola. Di seguito è riportata la sintassi del metodo Ridimenize ():
Sintassi
$ (finestra).ridimensionare ();IL finestra L'elemento rappresenta che il ridimensionare Il metodo viene applicato alla finestra. È possibile passare qualsiasi funzione come argomento al metodo Ridimensize (). In questo modo, la funzione viene eseguita sul ridimensionamento della finestra.
Esempio
Comprendiamo il concetto usando il seguente esempio.
Codice
Esempio di ridimensionamento della finestra del browser.
Ridimensiona la finestra su> 0 volte.
In questo codice:
- Innanzitutto, importa il jQuery all'interno del tag.
- Successivamente, una variabile I viene inizializzata con il valore 1.
- Dopodiché, il documento.pronto() il metodo viene utilizzato per verificare se il documento è pronto per il ridimensionamento.
- In questo metodo, finestra.ridimensionare () il metodo viene eseguito che estrae il contenuto della finestra del browser utilizzando $ ("Span").testo proprietà.
Produzione
L'output mostra l'esecuzione del codice sopra. Visualizza un valore che si aggiorna dinamicamente con la dimensione della schermata della finestra. Rappresenta il numero di volte in cui la finestra si ridimensiona.
Conclusione
IL addEventListener () Il metodo di JavaScript riporta l'altezza e la larghezza di ridimensionamento di Windows dinamicamente. Mentre il finestra.ridimensionare () Il metodo di jQuery restituisce il numero di volte in cui la finestra viene massimizzata o ridotta. Hai imparato due metodi diversi per rilevare l'evento di ridimensionamento della finestra del browser tra i jQuery e JavaScript.