Scritto il 05/03/2010 da Filippo Matteo Riggio
Salve cari lettori di good2know.it, oggi vorrei fornirvi un’utile funzione javascript che vi restituisce le dimensioni reali della pagina e della finestra visualizzata.
Leggete l’intero articolo per vedere la funzione.
// la funzione restituisce in un array
// la larghezza e l'altezza della pagina reale(scroll compreso) e la larghezza e l'altezza della finestra visibile
function getPageSize() {
var xScroll, yScroll;
// ---> RICAVO LE DIMENSIONI DELLA PAGINA <--- //
// window.innerHeight : altezza della finestra visibile
// window.innerWidth : larghezza della finestra visibile
// window.scrollMaxYÂ : dimensioni massime dello scroll verticale
// window.scrollMaxXÂ : dimensioni massime dello scroll orizzontale
// document.body.offsetHeight : altezza di default del browser
// document.body.offsetWidth : larghezza di default del browser
// se esiste l'altezza della finestra e lo scroll verticale(quindi esiste anche la barra x lo scorrimento)
// xScroll è la somma dello scroll orizzontale e della larghezza della finestra
// yScroll è la somma dello scroll verticale e dell'altezza della finestra
if (window.innerHeight && window.scrollMaxY) {
xScroll = window.innerWidth + window.scrollMaxX;
yScroll = window.innerHeight + window.scrollMaxY;
}else if (document.body.scrollHeight > document.body.offsetHeight){
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
}else{
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
// ---> RICAVO LE DIMENSIONI DELLA FINESTRA <--- //
// self.innerHeight : altezza di default della finestra
// self.innerWidth : larghezza di default della finestra
// (dimensioni non valide per Explorer 6)
// document.documentElement.clientWidth : larghezza di default della finestra
// document.documentElement.clientHeight : altezza di default della finestra
// (dimensioni valide per Explorer 6)
if (self.innerHeight) {
if(document.documentElement.clientWidth){
windowWidth = document.documentElement.clientWidth;
}else{
windowWidth = self.innerWidth;
}
windowHeight = self.innerHeight;
}else if (document.documentElement && document.documentElement.clientHeight) {
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
}else if (document.body) {
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
//per le pagine con l'altezza totale minore dell'altezza della finestra del browser
if(yScroll < windowHeight){
pageHeight = windowHeight;
}else {
pageHeight = yScroll;
}
//per le pagine con larghezza totale minore della larghezza della finestra del browser
if(xScroll < windowWidth){
pageWidth = xScroll;
}else{
pageWidth = windowWidth;
}
//creo l'array e lo ritorno
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight);
return arrayPageSize;
}
La funzione restituisce un array con le dimensioni.
Iscriviti al feed di Good2know
ciao! avrei bisogno di modificare questa funzione in modo che non appaia la barra di scorrimento orizzontale anche se appare quella verticale. Puoi aiutarmi?
Ciao, certo che posso aiutarti, tuttavia il fatto che compaia la barra orizzontale sotto è dovuto alle dimensioni dei div contenitori nella pagina web.
Controlla la larghezza di tutti i contenitori e vedi se non vai oltre la risoluzione del monitor.
Le funzioni qui sopra restituiscono le dimensioni della pagina e della finestra e non troverai nessun browser che ti permetta di far scomparire la scrollbar a piacimento, questo perchè è un problema risolvibile per mezzo delle proprietà dei CSS.
Spero di esserti stato d’aiuto.
Ciao!
Ciao, avrei una domanda se modifico la larghezza del browser senza aggiornare la pagina lo script rileva le modifiche?
Dipende da dove utilizzi le due funzioni.
Se le utilizzi sull’onload() della pagina ovviamente no.
Se lo utilizzi su chiamate di funzioni esterne, tipo onclick() o altre azioni vengono rilevate le dimensioni effettive.
ciao.
Questo articolo è molto bello. Ma ti volevo fare 2 domande
1) Sei sicuro che sia cross browser? molte delle definizoni degli elementi cambiano da browser a browser.
2) io vorrei dimensionare un iframe in base alla altezza della pagina in esso contenuta.
Vista la tua esperienza in questo campo volevo consiglio da te.
Grazie
Ciao Vincenzo, ti rispondo subito e provo ad esserti utile.
Allora per la prima domanda sì, è cross browser.
Per la seconda prova a fare così:
< script language="javascript" >
< / script >
< iframe width="300" id="mioIframe" onLoad="altezzaPagina();" src="test.html" scrolling="NO" frameborder="1" height="1">< / iframe>
Gli spazi sono per via d’interpretazione del codice!
Prova così e fammi sapere!