Forcer l'ouverture d'une fenêtre aux dimensions de l'image

**anca2** · 04/12/2011, 19h50

Bonsoir,
Afin de forcer FF et autre à redimensionner les fenêtres en fonction des images.
Je ne peux pas avoir les dimensions W et H (cela est-il possible ?).
Ci-dessous le js
Merci pour votre aide

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
var fois=0
function Affiche_figure(grandeImage,texte)
{
 
var W=(grandeImage.width)+20+"px";
var H=(grandeImage.height)+20+"px";
 
html = '<HTML><HEAD> <TITLE>Image</TITLE><meta http-equiv="Pragma" content="no-cache"></HEAD><BODY onBlur="window.close()"leftmargin=0 marginwidth=0 topmargin=0 marginheigth=0 oncontextmenu="return false"><CENTER>'+
'<a href="#" onClick="window.close()"><IMG SRC="'+grandeImage+'" BORDER=0 alt="'+texte+'" border="0" > </a></CENTER></BODY></HTML>';
if (fois == 1 ) ouvrirImage.close();
ouvrirImage = window.open('','_blank','toolbar=0,location=0,menuBar=0,scrollbars=0,resizable=0,height='+H+', width='+W+' ');
ouvrirImage.document.write(html);
fois=1;
}

**anca2** · 04/12/2011, 22h33

Ci-dessous, une solution qui fonctionne sur IE et chrome, mais pas sur FF.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
var fois=0
function Affiche_figure(grandeImage,texte)
{
 
html = '<HTML><HEAD> <TITLE>Image</TITLE><meta http-equiv="Pragma" content="no-cache"></HEAD><BODY onBlur="window.close()"leftmargin=0 marginwidth=0 topmargin=0 marginheigth=0 oncontextmenu="return false"><CENTER>'+
'<a href="#" onClick="window.close()"><IMG SRC="'+grandeImage+'" BORDER=0 NAME=monImage alt="'+texte+'"border="0" onLoad="window.resizeTo(document.monImage.width+20,document.monImage.height+80); window.moveTo((screen.width-document.monImage.width)/2,5)"> </a></CENTER></BODY></HTML>';
if (fois == 1 ) ouvrirImage.close();
ouvrirImage = window.open('','_blank','toolbar=0,location=0,menuBar=0,scrollbars=0,resizable=0');
ouvrirImage.document.write(html);
fois=1;
}

Sur FF la fenêtre n'est pas redimensionnée.

Votre aide sera capital car là, je cale.

Merci

**Watilin** · 05/12/2011, 18h50

Salut,

avant de te répondre j'aimerais attirer ton attention sur un point : dans Firefox (c'est l'exemple que j'ai actuellement sous la main), va dans les préférences, onglet « Contenu » puis, en face de la ligne « activer JavaScript », clique sur le bouton « Avancé ». Tu y verras une option « Autoriser les scripts à déplacer ou redimensionner les fenêtres existantes ».

Ce que je veux te dire, c'est que le redimensionnement des fenêtres est laissé au choix de l'utilisateur avec les navigateurs actuels. C'est plus ergonomique. Si l'utilisateur a désactivé cette option, tu ne pourras pas redimensionner sa fenêtre.

Toutefois, je viens de tester, ceci marche sous Firefox :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
window.innerWidth = 500;
window.innerHeight = 350;

Autre chose : Oublie document.write, c'est un dinosaure qui aurait dû disparaître depuis plusieurs décennies… Cette fonction a un comportement mal connu qui apporte beaucoup de problèmes. Notamment, elle peut effacer le contenu entier de la page quand elle est appelée après le chargement de celle-ci.

À la place, utilise innerHTML, ou mieux, apprends à te servir des méthodes du DOM

**SpaceFrog** · 05/12/2011, 19h25

De mémoire javatwister nous a gratifié d'un script pour ça dans la FAQ ou les contributions ...
Y'en a deja un bout par là
http://javascript.developpez.com/tel...chee-a-l-ecran

**anca2** · 05/12/2011, 19h53

Une réponse et je t’en remercie, en ce qui concerne mon FF il autorise le déplacement et le redimensionnement des fenêtres.

Comme je l’ai dit, il arrive un moment (rapidement) je cale en JS et je n’arrive pas à finir un script, là une réponse de votre part serait la bienvenue.

Donc, te serais t-il possible de lier ta réponse au deuxième script que j’ai mis.

Comme cela j’aurai des exemples à rapprocher avec les méthodes du DOM.

Les dinosaures avancent lentement.

Merci.

**Watilin** · 06/12/2011, 19h57

Voici une version DOM. Je n'ai pas mis de commentaires car je pense que le code est assez lisible comme ça.

Il reste cependant quelques points qui sont contraires à mes principes, notamment l'utilisation de onblur pour fermer la fenêtre, c'est assez irritant, ainsi que l'utilisation de la balise center qui est dépréciée. Je l'ai laissée dans mon code, mais en commentaires. Il est préférable d'aligner un contenu en utilisant un style CSS sur l'élément contenant, en l'occurence le body.
Note également que le paquet de paramètres que tu passes à window.open, comme 'toolbar=0' et autres, est déconseillé aujourd'hui pour les mêmes raisons que j'ai expliquées concernant le redimensionnement. Idem pour oncontextmenu.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
var popup;
function Affiche_figure( grandeImage, texte ) {
	if (popup && !popup.closed)
		popup.close();
	popup = window.open('', '_blank', 'toolbar=0,location=0,menuBar=0,scrollbars=0,resizable=0');
 
	var doc = popup.document;
	doc.title = 'Image';
 
	var $body = popup.document.body;
	$body.style.margin = '0';
	$body.oncontextmenu = function() { return false };
 
//	var $center = doc.createElement('center');
//	$body.appendChild($center);
	$body.style.textAlign = 'center';
 
	var $a = doc.createElement('a');
//	$center.appendChild($a);
	$body.appendChild($a);
	$a.href = '#';
	$a.onclick = function() {
		popup.close();
		return false;
	}
 
	var $img = doc.createElement('img');
	$a.appendChild($img);
	$img.style.border = 'none';
	$img.src = grandeImage;
	$img.alt = texte;
	$img.onload = function() {
		popup.resizeTo(this.width + 20, this.height + 80);
		popup.moveTo((screen.width - this.width) / 2, 5);
	}
 
	popup.onblur = popup.close;
}

Comme tu le vois, j'utilise principalement deux méthodes du DOM : document.createElement et element.appendChild. J'utilise également les attributs de style, ainsi que certains attributs spécifiques comme href, alt et src.
Ce n'est pas encore du code « standard », car il faudrait utiliser des gestionnaires d'évènements addEventListener au lieu d'assigner directement les attributs onXXX (par exemple onclick), mais j'ai fait preuve d'un peu de pragmatisme

**anca2** · 06/12/2011, 22h01

Merci pour ta réponse développée et argumentée.

Ce script sert qu’à ouvrir une fenêtre avec une image. Cette fenêtre se ferme dés qu’elle passe dessous ou se ferme si l’on clique ou se ré-ouvre avec une autre image cela permet qu’a la sortie de la page tout est propre (il y a pas de fenêtre).

J’ai mis en place ton script, il ne fonctionne que sur IE-7-8-9 et pas sur Chrome, Opéra et FF (pas d’image et pas de redimensionnement.

Le mien (le second) fonctionne sur tous sauf sur FF le redimensionnement ne se fait pas mais il y a l’image.

J’ai l’impression que c’est difficile. Merci tout de même de ton implication.

**Watilin** · 08/12/2011, 20h19

Envoyé par anca2

J’ai mis en place ton script, il ne fonctionne que sur IE-7-8-9 et pas sur Chrome, Opéra et FF (pas d’image et pas de redimensionnement.

J'ai testé mon script sous FF avant de le poster, il fonctionnait parfaitement. Sous Opera, il fonctionne aussi dans une certaine mesure, car sous Opera, les popups s'ouvrent obligatoirement dans des onglets, et le redimensionnement est impossible. En tout cas, j'avais l'image. Es-tu sûr d'avoir bien intégré mon script ?

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" onclick="Affiche_figure('http://example.com/image.jpg', 'tralala tsoin tsoin'); return false">Cliquez-moi</a>

**anca2** · 08/12/2011, 22h27

Bonsoir,

Pour l’image j’avais fais une petite erreur, j’en suis désolé.

Le redimensionnent ne se fait toujours pas (Hors Opéra)

Les images peuvent avoir des dimensions différentes.
De plus, sur FF ou chrome on peut redimensionner la fenêtre, donc, si sur ces derniers l’on redimensionne la fenêtre toutes les autres vont s’ouvrir avec la dernière dimension.

Comme je l’ai dit, je ne maitrise pas JS avec le DOM (mais t’on script ma fait comprendre certaines imbrications, et oui… Rien ne se perd, tout se …. Merci), de plus, je ne veux pas m’incruster pour une fonction dont d’après certains essais peut se faire avec JQuery ou wz_tooltip, un peu lourd mais bon …

Merci pour tout.

**Watilin** · 09/12/2011, 14h35

C'est toi qui vois

Je tenais juste à te faire connaître des alternatives à document.write.
Note que jQuery et la très grande majorité des frameworks JavaScript utilisent les méthodes du DOM sous le capot.

Forcer l'ouverture d'une fenêtre aux dimensions de l'image

JavaScript

Discussions similaires

Partager

Partager