javascript créer - Taille du navigateur (largeur et hauteur)





un portfolio (6)


function getWindowSize(){
 var d= document, root= d.documentElement, body= d.body;
 var wid= window.innerWidth || root.clientWidth || body.clientWidth, 
 hi= window.innerHeight || root.clientHeight || body.clientHeight ;
 return [wid,hi]
}

Les navigateurs IE sont les seuls à ne pas utiliser innerHeight et Width.

Mais il n'y a pas de 'standard' - juste des implémentations de navigateur.

Testez le html (document.documentElement) clientHeight avant de vérifier le corps - s'il n'est pas 0, c'est la hauteur du 'viewport' et le body.clientHeight est la hauteur du corps - qui peut être plus grande ou plus petite que la fenêtre .

Le mode arrière renvoie 0 pour l'élément racine et la hauteur de la fenêtre (fenêtre) à partir du corps.

Même avec la largeur.

J'essaie de détecter la taille actuelle du navigateur (largeur et hauteur). Je sais que c'est super facile dans jQuery avec $(document).width and $(document).height , mais je ne veux pas ajouter la taille de la librairie jQuery au projet, donc je préfère utiliser JavaScript intégré . Quelle serait la manière courte et efficace de faire la même chose avec JavaScript?




Essaye ça;

 <script type="text/javascript"> 
winwidth=document.all?document.body.clientWidth:window.innerWidth; 
winHeight=document.all?document.body.clientHeight:window.innerHeight; 
alert(winwidth+","+winHeight);
</script> 



Mon cas d'utilisation pour window.innerWidth impliqué la construction d'une fenêtre pop-up modale personnalisée. Autrement dit, l'utilisateur clique sur le bouton, la fenêtre s'ouvre centrée dans le navigateur et il y a un bkgd noir transparent derrière la fenêtre contextuelle. Mon problème était de trouver la largeur et la hauteur du navigateur pour créer le bkgd transparent.

window.innerWidth fonctionne très bien pour trouver la largeur, mais souvenez-vous que window.innerWidth and window.innerHeight ne compensent pas les barres de défilement, donc si votre contenu dépasse la zone de contenu visible. Je devais soustraire 17px de la valeur.

transBkgd.style.width = (window.innerWidth - 17) + "px";

Puisque le contenu du site allait toujours au-delà de la hauteur visible, je ne pouvais pas utiliser window.innerHeight . Si l'utilisateur faisait défiler vers le bas, le bkgd transparent se terminerait à ce moment là et cela aurait juste l'air méchant. Afin de maintenir le bkgd transparent jusqu'au fond du contenu j'ai utilisé document.body.clientHeight .

transBkgd.style.height = document.body.clientHeight + "px";

J'ai testé la pop up dans IE, FF, Chrome, et il semble bon dans tous les domaines. Je sais que cela ne suit pas trop la question originale mais je pense que cela pourrait aider si quelqu'un d'autre rencontre le même problème lors de la création d'une pop-up modale personnalisée.




// first get the size from the window
// if that didn't work, get it from the body
var size = {
  width: window.innerWidth || document.body.clientWidth,
  height: window.innerHeight || document.body.clientHeight
}



Voici un exemple de code

function getSize(){

var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

var h=window.innerHeight || document.documentElement.clientHeight ||document.body.clientHeight;


}



Puisque vous utilisez jQuery , vous pouvez simplement définir la propriété text l'élément:

// before:
// <div class="someClass">text</div>
var someHtmlString = "<script>alert('hi!');</script>";

// set a DIV's text:
$("div.someClass").text(someHtmlString);
// after: 
// <div class="someClass">&lt;script&gt;alert('hi!');&lt;/script&gt;</div>

// get the text in a string:
var escaped = $("<div>").text(someHtmlString).html();
// value: 
// &lt;script&gt;alert('hi!');&lt;/script&gt;




javascript jquery browser