[DOM] Fenêtre javascript et html

**pas30** · 23/11/2008, 05h54

Voici un code que j'ai tapé qui sera assez facilement compréhensible pour ceux qui connaisse javascript :

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
39
40
41
<?php
echo 'document.write("<DIV ID=\"pub\" STYLE=\"position:fixed;top:0;left:0;z-index:0\"></DIV>");
                
                function showsup()
                        {
                        if(document.getElementById)
                                {
                                document.getElementById(\'pub\').style.width = largeur;
                                document.getElementById(\'pub\').style.height = hauteur;
                                document.getElementById(\'pub\').innerHTML = code;
                                }
                        }
                
                function closeSup()
                        {
                        if(document.getElementById)
                                {
                                document.getElementById(\'pub\').style.width = 1;
                                document.getElementById(\'pub\').style.height = 1;
                                document.getElementById(\'pub\').innerHTML = \'\';
                                }
                        }
                                
                if(!document.all && document.getElementById){
                hauteur = window.innerHeight;
                        largeur = window.innerWidth;
                }
                else {
                        hauteur = document.body.clientHeight;
                largeur = document.body.clientWidth;
                }
                                                
                code = "<TABLE border=0 WIDTH="+largeur+" HEIGHT="+hauteur+"><TR><TD VALIGN=middle ALIGN=center><A HREF=# onClick=\'closeSup();return(false)\'><img src=http://www.test.fr/fermer.gif border=0></A>";
                code += "<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>";
                code += "<TR>";
                code += "<TD><iframe width=600 height=400 src=http://www.siteavisiter.com></iframe></TD>";
                code += "</TR>";
                code += "</TABLE>";
                code += "</TD></TR></TABLE>";
                window.onload = showsup;';
?>

Bon donc voilà mon code ne fait pas ce que je veux en fait
Ce code affiche en premier plan une fenêtre publicitaire de 600*400 contenant une iframe elle même contenant un site internet
Je voudrais que l' iframe soit affichée en haut à gauche de l'écran et que juste au dessus de l'iframe donc du site chargée il y est une ligne de tableau noir avec du texte écrit en blanc pour présenter le site et à droite dans cette même ligne la possibilité d'ouvrir le site en pleine page et de fermer la fenêtre javascript
Voilà si quelqu'un pouvait m'aider celà serait sympa je suis assez perdu
J'ai déjà réglé deux problèmes majeurs :
1 - L'iframe est par dessus le reste du site et le reste est inaccessible, pour le rendre accessible il faut fermer la fenêtre javascript
2 - Avec le window.onload, mon code peut être collé n'importe ou sans détruire la présentation de mon site

**le_chomeur** · 23/11/2008, 11h24

as tu essayés de jouer sur les z-index ?
ici le problème est du a du css / positionnement que du javascript en lui même puisque ton code fonctionne...

par contre ==> document .write est à déconseiller

**SpaceFrog** · 23/11/2008, 15h28

document.write , un table en innerHTML ..

mauvaises méthodes

**pas30** · 23/11/2008, 16h12

Vous ne m'aidez pas

Dans vos messages vous ne me proposez rien
InnerHtml et document.write vous n'aimez pas ok alors vous mettriez quoi ?
Et surtout comment dois-je faire pour arriver à ce résultat :
-----------------------------------------------------
| Présentation****************Ouvrir le site Fermer|
-----------------------------------------------------
|**************Contenu de l'iframe************ |
|*****************************************|
|*****************************************|
|*****************************************|
|*****************************************|
|*****************************************|
|*****************************************|
|*****************************************|
-----------------------------------------------------
Je n'arrive pas à ce résultat, j'arrive à avoir l'iframe qui est par dessus tout le contenu de la page (ce que je veux donc ok) mais dès que j'essaie de rajouter la ligne avec avec présentation, Ouvrir le site et Fermer çà ne marche plus car je ne sais pas trop comment faire

**le_chomeur** · 23/11/2008, 17h07

pour la mise en page , quelques chose de ce genre ??

Code :

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

1
2
3
4
5
<div>
<p id="toto"><a href="#" style="float:right">ouvrir le site</a><a href="#" style="float:right">Fermer</a> titre ici </p>
<iframe width="100%">
</iframe>
</div>

pour faire ceci et les rajouter dynamiquement tu es sur la bonne voie mais oriente toi du coté du dom exemple pour ajouter un lien dans la balise p :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
function ajouterLien(TextToAdd){
		var d = document;
		var NewLien =	d.createElement('a');
		//( un peu barbare mais bon  ;) )
		NewLien.innerHTML = TextToAdd
NewLien.href="www.google.fr";
NewLien.onclick = function(){tamethodeclose();return false;};
		var objP  = document.getElementById( 'toto' );
		//On ajoute l'item en tout premier
		objP.appendChild(NewLien);
	}

ceci n'est donné qu'a titre informatif

**pas30** · 24/11/2008, 08h25

Bon alors j'ai presque tout réglé j'ai bien dit presque car avec firefox tout semble ok mais pas avec internet explorer. Avec internet explorer sur un site que j'ai testé et qui contient des tableaux celà ne passe pas.

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
39
40
41
42
43
<?php
echo 'document.write("<DIV ID=\"pub\" STYLE=\"position:fixed;top:0;left:0;z-index:0\"></DIV>");
                
                function showsup()
                        {
                        if(document.getElementById)
                                {
                                document.getElementById(\'pub\').style.width = largeur;
                                document.getElementById(\'pub\').style.height = hauteur;
                                document.getElementById(\'pub\').innerHTML = code;
                                }
                        }
                
                function closeSup()
                        {
                        if(document.getElementById)
                                {
                                document.getElementById(\'pub\').style.width = 1;
                                document.getElementById(\'pub\').style.height = 1;
                                document.getElementById(\'pub\').innerHTML = \'\';
                                }
                        }
                                
                if(!document.all && document.getElementById){
                hauteur = window.innerHeight;
                        largeur = window.innerWidth;
                }
                else {
                        hauteur = document.body.clientHeight;
                largeur = document.body.clientWidth;
                }
                                                
                code = "<TABLE border=0 WIDTH="+largeur+" HEIGHT="+hauteur+"><TR><TD VALIGN=top ALIGN=left>";
                code += "<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>";
                code += "<TR><TD bgcolor=#000000 width=300 height=20><div align=left><FONT color=#ffffff size=1><b><a style=color:#FFFFFF href=http://www.monsite.fr target=_blank>Mon site</a></b></font></div></TD>";
                code += "<TD width=300 bgcolor=#000000><div align=right><FONT color=#ffffff size=1><b><a style=color:#FFFFFF href=http://www.monsite.fr/adclic.php?idpub=701&pseudo=test target=_blank>Ouvrir le site</a> <a style=color:#FFFFFF href=# onClick=closeSup()>Fermer</a></div></TR>";
                code += "<TR>";
                code += "<TD colspan=2><iframe width=600 height=400 src=http://www.sitetest.com></iframe></TD>";
                code += "</TR>";
                code += "</TABLE>";
                code += "</TD></TR></TABLE>";
                window.onload = showsup;';
?>

Il faudrait sans doute virer le système des tableaux enfin je ne sais pas comment il serait possible de faire la même chose sans utiliser de tableaux
Firefox gère la chose parfaitement mais internet explorer n'y arrive pas
Voir la différence ici :
Cliquez ici !!!
Indiquez moi ce que vous obtenez et dîtes moi ce que vous en pensez

**pas30** · 24/11/2008, 10h02

Je suspecte InnerHTML et les tableaux peut-être d'être responsable de ce problème, j'ai en effet lu que innerHTML et internet explorer ne font pas bon ménage
Comment pourrais-je remplacer tout ce bazard ?

**Bovino** · 24/11/2008, 10h14

Code :

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

1
2
<?php
echo 'document.write("<DIV ID=\"pub\" STYLE=\"position:fixed;top:0;left:0;z-index:0\"></DIV>");

document.write, il te sert à quoi ???

Sinon, comme déjà dit, pour éviter innerHTML, il faut passer par les méthodes du DOM (createElement / appendChild ou insertRow / insertCell)

**le_chomeur** · 24/11/2008, 10h16

il semblerait que ce soit cette ligne la qui pose problème :

var get = encodeURIComponent(top.document.location.href);

ligne 133 de ton js

**SpaceFrog** · 24/11/2008, 10h32

location n'est pas une propriété de document mais de window .... !!!

Code :

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

top.location.href

**pas30** · 24/11/2008, 11h03

D'où vous sortez ce code :

Code :

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

var get = encodeURIComponent(top.document.location.href);

Et sinon j'ai enlevé document.write(""); et çà ne marche plus du tout donc il s'avère qu'il est nécessaire, je dois mettre quoi à la place ???
Je veux bien le virer mais si çà ne marche plus, je le laisse moi

Et sinon il faudrait peut-être remplacer les tableaux par des div non ???
Des div avec dedans du DOM

**Bovino** · 24/11/2008, 11h09

Et sinon j'ai enlevé document.write("");

Si tu l'enlèves (ce qui est mieux), il faut aussi sortir le echo de ton code html de la balise script dans laquelle je suppose qu'il est...
En gros :

Code :

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

1
2
<?php echo '<script>document.write(\'<div>toto</div>\')</script>';
?>

revient au même que :

Code :

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

<?php echo '<div>toto</div>' ?>

**pas30** · 24/11/2008, 11h19

mon code ne doit contenir QUE du javascript enfin il me semble car il est appelé de la manière suivante :

Code :

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

1
2
<script type="text/javascript" src="http://www.monsite.fr/popexemple.php">
</script>

**SpaceFrog** · 24/11/2008, 11h25

c'est sur que si tu génére un code js avec php, il ne faut mettre que du js,
oui mais c'est le principe même du document.write pour créer un div qui est à remettre en cause ...

**pas30** · 24/11/2008, 12h07

J'avance un peu dans l'idée et j'ai décidé de faire du code plus propre en remplaçant les tableaux par des div

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
39
40
41
42
43
44
<?php
echo 'document.write("<DIV ID=\"pub\" STYLE=\"position:fixed;top:0;left:0;z-index:0\"></DIV>");
                
                function showsup()
                        {
                        if(document.getElementById)
                                {
                                document.getElementById(\'pub\').style.width = largeur;
                                document.getElementById(\'pub\').style.height = hauteur;
                                document.getElementById(\'pub\').innerHTML = code;
                                }
                        }
                
                function closeSup()
                        {
                        if(document.getElementById)
                                {
                                document.getElementById(\'pub\').style.width = 1;
                                document.getElementById(\'pub\').style.height = 1;
                                document.getElementById(\'pub\').innerHTML = \'\';
                                }
                        }
                                
                if(!document.all && document.getElementById){
                hauteur = window.innerHeight;
                        largeur = window.innerWidth;
                }
                else {
                        hauteur = document.body.clientHeight;
                largeur = document.body.clientWidth;
                }
//              code = "<TABLE border=0 WIDTH="+largeur+" HEIGHT="+hauteur+"><TR><TD VALIGN=top ALIGN=left>";
//              code += "<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>";
//              code += "<TR><TD bgcolor=#000000 width=300 height=20><div align=left><FONT color=#ffffff size=1><b><a style=color:#FFFFFF href=http://www.monsite.fr target=_blank>Régie Publicitaire</a></b></font></div></TD>";
//              code += "<TD width=300 bgcolor=#000000><div align=right><FONT color=#ffffff size=1><b><a style=color:#FFFFFF href=http://www.avenir-affiliation.fr/adclic.php?idpub=701&pseudo=test target=_blank>Ouvrir le site</a> <a style=color:#FFFFFF href=# onClick=closeSup()>Fermer</a></div></TR>";
//              code += "<TR>";
//              code += "<TD colspan=2><iframe width=600 height=400 src=http://www.siteavisiter.com></iframe></TD>";
//              code += "</TR>";
//              code += "</TABLE>";
//              code += "</TD></TR></TABLE>";
                code = "<DIV id=title style=height:20; width:600; background-color: black>Régie Publicitaire</DIV>";
                code += "<DIV id=frame style=height:400;width:600><iframe width=600 height=400 src=http://www.siteavisiter.com></iframe></DIV>";
                window.onload = showsup;';
?>

Le problème reste présent sur internt explorer donc celà signifie vraisemblablement que le problème se situe au niveau de innerHTML
Il me reste un petit problème de plus sur le premier div qui ne se met pas en fond noir, celà ne marche pas...

De plus, il va falloir que je place le texte Régie Publicitaire à gauche du div et à droite deux liens sur la même ligne pour l'ensemble comme ci-dessous (les * représentant des espaces :
Régie Publicitaire*******************Ouvrir le site Fermer

**le_chomeur** · 24/11/2008, 12h18

pour moi l'erreur viens toujours d'ici :

Code :

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

var get = encodeURIComponent(top.document.location.href);

**pas30** · 24/11/2008, 12h26

Mais où vois tu ce code ?
Je n'ai pas programmé celà

**le_chomeur** · 24/11/2008, 12h29

dans le fichier js de ta régie publicitaire :

http://www.webocodes.com/inc/functions.js

**pas30** · 24/11/2008, 12h37

Ce n'est pas ma régie

c'est moi la régie

Ce site n'est que le site affiché dans l'iframe car j'en fais la publicité, je ne pense pas qu'ils puissent influencer ce que j'affiche
D'ailleurs j'ai changé le site chargé et le problème est toujours le même

**pas30** · 24/11/2008, 13h03

Bon j'ai réussi à régler le problème du premier div :

Code :

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

code = "<DIV id=titre style=height:15;width:600;background-color:black><FONT color=#ffffff size=1><b><a style=color:#FFFFFF href=http://www.monsite.fr target=_blank>Régie Publicitaire</a></b></font></DIV>";

J'ai désormais un fond noir pour mon div avec le texte blanc par dessus
Le problème c'est que je voudrais mettre deux liens dans le DIV qui doivent être situé à droite dans le DIV

Régie Publicitaire********************Ouvrir le site**Fermer

Les * représentent des espaces donc à gauche le texte "Régie publicitaire" et à droite les deux liens et tout çà dans le même DIV si possible
Merci de votre aide

[DOM] Fenêtre javascript et html

JavaScript

Discussions similaires

Partager

Partager