{"id":131,"date":"2007-12-04T12:52:12","date_gmt":"2007-12-04T11:52:12","guid":{"rendered":"http:\/\/luca.lovalvo.net\/1_luca_lo_valvo\/archive\/226_redimensionner_une_fentre_ou_une_popup_en_javascript.html"},"modified":"2022-11-04T15:58:25","modified_gmt":"2022-11-04T14:58:25","slug":"redimensionner-une-fenetre-ou-une-popup-en-javascript","status":"publish","type":"post","link":"https:\/\/luca.lovalvo.ch\/blog\/redimensionner-une-fenetre-ou-une-popup-en-javascript\/","title":{"rendered":"Redimensionner une fen\u00eatre (ou une PopUp) en Javascript"},"content":{"rendered":"

L'ojectif est de redimensionner une fenêtre ou une popup, en réduisant, par exemple, 90px de hauteur.<\/p>\n

 <\/p>\n

Je suis conscient que cela peut paraître bizarre d’effectuer un window.open de 728 large sur 590 de haut, si après, on modifie la hauteur pour obtenir 500 de haut.
Donc vous vous demandez, pourquoi ne pas ouvrir la PopUp en 728×500 directement.
Simplement, car dans certain cas de situation, il est plus simple de demander à la PopUp de s’adapter au client après son ouverture, plutôt qu’à l’ouverture elle-même.
Par exemple pour « masquer » un bord sous certaine condition.
Vous comprendrez mon cas plus bas \ud83d\ude42<\/p>\n

(passer directement au code<\/a>)<\/p>\n

Mon cas de siutation est le suivant :<\/p>\n

Liens.html<\/font>
Une page avec des liens vers des images, indiquant en dur la taille de la fenêtre dans le windows.open().<\/p>\n

images.php<\/font>
Un script d’affichage d’image contant :
– Un logo
– Mon image
– un Leaderboard de 728×90<\/p>\n

Le script (images.php) est le même pour chaque image, la page liens.html, connaît, d’après une base de donnée, la hauteur et la largeur de l’image (la place qu’elle prend), et adapte la taille de la popup en conséquence.<\/p>\n

L’idée est la suivante :
Adapter la taille de la PopUp (images.php) contant le logo, l’image, et le leaderboard en fonction de la taille de l’image.
Seulement, le Leaderboard lui peut s’afficher sous certaine condition (géo targeting par exemple).
C’est pour cela, qu’afin d’éviter un espace supplémentaire en bas de la fenêtre, nous allons, réadapter cette dernière en fonction de si le Leaderboard est appelé ou pas.<\/p>\n

En faite, tout ce blabla pour 3 lignes de code JS, car je ne vais pas présenter ici, ni images.php, ni rien d’autre \ud83d\ude42 juste la fonction qui va redimensionner le tout \ud83d\ude42<\/p>\n

<\/a>La dite fonction est : window.resizeTo(x,y)
X = La largeur
y= La hauteur.<\/p>\n

1) On détecte la taille actuelle de la popup<\/strong><\/p>\n

var windowWidth;
var windowHeight;<\/p>\n

\/\/en fonction du navigateur                  
if (parseInt(navigator.appVersion)>3)
{
 if (navigator.appName=="Netscape") {
  windowWidth = window.innerWidth;<\/font>
  windowHeight = window.innerHeight;<\/font>
 }
 if (navigator.appName.indexOf("Microsoft")!=-1) {
  windowWidth = document.body.offsetWidth;<\/font>
  windowHeight <\/font>= document.body.offsetHeight;<\/font>
 }
}<\/font><\/p>\n

2) on établie la nouvelle taille de la fenêtre<\/font><\/strong><\/p>\n

\/\/on détermine la nouvelle taille de la fenêtre en supprimant 90<\/strong> px
windowNewHeight<\/font>= windowHeight<\/font>–90<\/strong><\/font><\/p>\n

\/\/on redimensionne le popup avec la nouvelle hauteur
window.resizeTo(windowWidth, windowNewHeight<\/font>)<\/font><\/p>\n

Waouw .. rude. Je sais<\/p>\n

Dans mon cas de situation j’ai mis le tout dans une fonction JS qui était appelée, uniquement si  le banner ne s’affichait pas, par exemple, si le visiteur ne provenait pas de Suisse.<\/p>\n

3) facultatif, afficher la taille de la fenêtre avant la redimension<\/strong>
            document.write(
                    "Largeur = "+windowWidth+"<br>"
                    +"hauteur = "+windowHeight
                    )<\/font><\/p>\n

 
4)<\/strong> On pourrait aller un peu plus loin on ne spécifiant pas la hauteur et la largeur de la popup dans le window.open() mais directement en se basant sur les propriétés de l’images directement.<\/p>\n

Par exemple avec un :
imageWidth = document.images[0].width;
imageHeight = document.images[0].height;<\/p>\n

<\/font><\/p>\n","protected":false},"excerpt":{"rendered":"

L'ojectif est de redimensionner une fenêtre ou une popup, en réduisant, par exemple, 90px de hauteur.   Je suis conscient que cela peut paraître bizarre d’effectuer un window.open de 728 large sur 590 de haut, si après, on modifie la hauteur pour obtenir 500 de haut.Donc vous vous demandez, pourquoi ne pas ouvrir la PopUp […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-131","post","type-post","status-publish","format-standard","hentry","category-programmation"],"_links":{"self":[{"href":"https:\/\/luca.lovalvo.ch\/blog\/wp-json\/wp\/v2\/posts\/131","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/luca.lovalvo.ch\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/luca.lovalvo.ch\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/luca.lovalvo.ch\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/luca.lovalvo.ch\/blog\/wp-json\/wp\/v2\/comments?post=131"}],"version-history":[{"count":1,"href":"https:\/\/luca.lovalvo.ch\/blog\/wp-json\/wp\/v2\/posts\/131\/revisions"}],"predecessor-version":[{"id":339,"href":"https:\/\/luca.lovalvo.ch\/blog\/wp-json\/wp\/v2\/posts\/131\/revisions\/339"}],"wp:attachment":[{"href":"https:\/\/luca.lovalvo.ch\/blog\/wp-json\/wp\/v2\/media?parent=131"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/luca.lovalvo.ch\/blog\/wp-json\/wp\/v2\/categories?post=131"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/luca.lovalvo.ch\/blog\/wp-json\/wp\/v2\/tags?post=131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}