script pour ouvrir lien/LINK dans une DIV

**santaflam** · 25/06/2010, 15h42

Bonjour,

je cherche à ouvrir un lien html dans une DIV "content".
J ai trouvé ce script censé marcher mais il n ouvre pas la page.

Code html :

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	<title>CompanyName - PageName</title>
 
 
<script type="text/javascript">
 
function jah(url,target) { 
// native XMLHttpRequest object 
document.getElementById(target).innerHTML = 'sending...'; 
if (window.XMLHttpRequest) { 
req = new XMLHttpRequest(); 
req.onreadystatechange = function() {jahDone(target);}; 
req.open("GET", url, true); 
req.send(null); 
// IE/Windows ActiveX version 
} else if (window.ActiveXObject) { 
req = new ActiveXObject("Microsoft.XMLHTTP"); 
if (req) { 
req.onreadystatechange = function() {jahDone(target);}; 
req.open("GET", url, true); 
req.send(); 
} 
} 
} 
 
function jahDone(target) { 
// only if req is "loaded" 
if (req.readyState == 4) { 
// only if "OK" 
if (req.status == 200) { 
results = req.responseText; 
document.getElementById(target).innerHTML = results; 
} else { 
document.getElementById(target).innerHTML="jah error:\n" + 
req.statusText; 
} 
} 
}
 
</script>
 
 
</head>
 
 
<body>
 
<div id="container">
	<div id="header">
		<h1> Le header</h1>
	</div>
	<div id="language_bar">
	</div>
 
	<div id="wrap">
 
		<div id="menu">
			<ul id="nav">
			</ul>
		</div>
		<div id="content">
			<ul id="liste_surv">
				<li id="art1">
					<div class="texte_art">
						<a href="jah('des.html','content')">
						<span class="titre_art">
						Design
						</span>
						</a>
					</div>
				</li>
 
			</ul>
		</div>
	</div>
</div>
 
 
</body>
</html>

Est-ce que le lien est correct ('content' etant le nom de la DIV )?
<a href="jah('des.html','content')">

Merci pour toute aide!

**SpaceFrog** · 25/06/2010, 15h57

Code :

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

<a href="#" onclick="jah('des.html','content');return false;">

**santaflam** · 25/06/2010, 18h31

OK, merci ! onclick avec un k, ca lance bien le script! Mais au lieu de charger la page des.html dans le DIV 'content', il écrit "sending..." et met un lien "click".

**Bovino** · 25/06/2010, 18h50

je cherche à ouvrir un lien html dans une DIV "content".

Juste pour me rassurer, tu ne comptes pas insérer une page HTML complète (avec balises <html>, <head>, <body> etc.) dans une div ?
Parce que ça, c'est impossible !

**javatwister** · 25/06/2010, 19h01

Je n'osais le dire, Bovino

Malheureusement, c'est une logique qui n'est toujours pas entrée dans les moeurs.

**santaflam** · 26/06/2010, 18h42

Envoyé par Bovino

Juste pour me rassurer, tu ne comptes pas insérer une page HTML complète (avec balises <html>, <head>, <body> etc.) dans une div ?

Merci pour ton aide!
Si c' est bien ce que je comptais faire. Ca marche comment alors le web ?
Je croyais qu ' on faisait sa mise en page avec menu de navigation et qu à chaque click dans de navigation, on ouvre une autre page contenant le texte, les photos correspondants - ca parait logique pour un non-connaisseur;-)-

Je précise: je crée mon site en local, tout simple (menu, header,footer) html et css,je connais rien d' autre encore (et si possible je veux rien d autre).
Je croyais tout simplement charger le nveau contenu de ma page dans la div content par:
<a href="nveau_contenu.html" target="content">
Evidemment on m a rigolé au nez, Ok. Puis certains parlent de Javascript pour faire ca, d autres disent Php ... Bien ! Est ce qu il y a encore plus compliqué pour afficher 3 bout de textes et deux images dans une page formattée par div ??

Merci!

**santaflam** · 28/06/2010, 19h22

Envoyé par Bovino

Juste pour me rassurer, tu ne comptes pas insérer une page HTML complète (avec balises <html>, <head>, <body> etc.) dans une div ?
Parce que ça, c'est impossible !

Je cherche toujours ... :
lorsque je regarde un site comme celui-ci:
http://neadesignnc.com/neadesignnc/index.htm

j affiche le source, je cherche "details",correspondant au bouton "Details" du menu. Le href en question il appelle bien un fichier detail.htm, je suppose qu il comprend ttes les balises que tu cites.
Ou est ce que je me trompe ??

Merci pour tout commentaire!

**supersnail** · 28/06/2010, 19h59

Bonjour,

Bah là le site que tu montres n'est pas du tout "ajax", le menu est juste le même pour toutes les pages...

Sinon,pour l'insertion d'une page html dans un div, le code HTML est inséré dans un div, et je pense que ce serait un peu bizarre d'écrire:

Code :

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

1
2
3
4
5
6
7
<div id="content">
<html>
<head>
... du code html ...
</body>
</html>
</div>

**santaflam** · 28/06/2010, 20h36

Envoyé par supersnail

Bonjour,

Bah là le site que tu montres n'est pas du tout "ajax", le menu est juste le même pour toutes les pages...

Ajax??
Je recadre:
Je veux le meme principe c-a-d le menu reste bien sûr pour ttes les pages.

je pensais faire ("content" etant le nom de ma div ou je veux afficher la nvelle pge).
<a href="la_nvelle_pge.html" target="content"> ...

Mais ca, ca ne marche pas, et dans ce forum on m a orienté soit sur le Javascript, soit php. Les 2 me paraissant bien compliqué, ´j ai cru qu il y avait une solution plus simple (c est pour ca aussi que j ai donné le lien, car il me simple qu ' on y utilise ni Javascript ni php).

Merci.

**supersnail** · 28/06/2010, 20h53

Bonjour,

Bah PHP est sûrement utilisé, sauf que la personne qui voit la page dans son navigateur ne voit pas de code PHP (heureusement d'ailleurs).

Cependant, tu peux faire la même chose en HTML, cependant tu vas devoir copier-coller la même structure HTML de TOUTES tes pages HTML,pour simplement modifier le contenu... (c'est pour cela qu'il vaut mieux utiliser PHP,même si cela reste faisable en HTML "classique").

**santaflam** · 29/06/2010, 09h21

Envoyé par supersnail

Cependant, tu peux faire la même chose en HTML, cependant tu vas devoir copier-coller la même structure HTML de TOUTES tes pages HTML,pour simplement modifier le contenu...

Merci!
Excuses d être un peu lourd, mais comment je fais en html, sachant que ce qu 'on faisait autrefois avec les cadres/frames c-a-d <a href="nvelle_page.html" target="la_div_content">... ne marche pas.
Tu dis copier/coller mes pages ? Ou ca? Dans un unique et seul fichier html? Et puis ou dans le fichier? Ca c est mon menu, j ecris quoi dans le href?

Code html :

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

1
2
3
4
<ul id="nav">
<li id="nav_home"><a href="#">Home</a></li>
<li id="nav-eng"><a href="#">Engineering Design</a></li>
</ul>

Merci encore.

**SpaceFrog** · 29/06/2010, 09h34

En gros ce que l'on t'a expliqué c'est que la page est intégralement rechargé.
Donc avec html / javascript tu ne peux pas faire ce que fait un langage serveur c'est a dire composer (concatener le code html ) la page. php le fait avec include().

soit tu répliques le code html des menu sur les pages et tu modifies juste la partie changeante en dur.

soit tu restes avec des frame / ou iframe ou balises object

soit tu passes en langage serveur

soit si le contenu n'est pas trop gros tu mets tout sur une seule page et tu joues avec js sur la visibilité des parties élements (principe des onglets)

soit tu bidouilles avec ajax pour venir modifier une partie de la page avec du code html mais sans les header

**santaflam** · 29/06/2010, 10h35

Envoyé par SpaceFrog

En gros ce que l'on t'a expliqué c'est que la page est intégralement rechargé.
Donc avec html / javascript tu ne peux pas faire ce que fait un langage serveur c'est a dire composer (concatener le code html ) la page. php le fait avec include().

soit tu répliques le code html des menu sur les pages et tu modifies juste la partie changeante en dur.

soit tu restes avec des frame / ou iframe ou balises object

soit tu passes en langage serveur

Merci pour cette réponse précise!

Recharger la page intégralement?! Hors de question parce que visuellement, pour le "surfeur", c est "crade" comme solution.

Bon, j ai compris que je ne passerais pas au travers de php, ca m apportera plus de bagage que de commencer à bidouiller en Javascript, meme si pour ma page web, je vais me servir de moins de 1% de ce que propose php (pas de bdd, quasiment pas de requetes utilisateur ...)

**supersnail** · 29/06/2010, 10h46

Bonjour,

Bah même en PHP, tu rechargeras aussi complètement ta page

.

Donc dans ce cas, vaut mieux passer par javascript

(et, soit bidouiller pour enlever les balises <html> , <head> et <body> superflues, ou soit créer des morceaux da pages dépourvues de ces balises

).

Par contre, pour ta question initiale, ton lien n'est pas correct: il faudrait écrire

Code :

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

<a href="jaavscript:jah('des.html','content')">

, ou encore mieux

Code :

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

<a href="#" onclick="jah('des.html','content')">

.

Cependant, en faisant ceci, tu empêches l'utilisateur d'ouvrir ta page dans un nouvel onglet

(et faut bidouiller pour que cela soit possible, notamment en jouant sur l'ancre).

**E.Bzz** · 29/06/2010, 11h11

Envoyé par SpaceFrog

Code :

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

<a href="#" onclick="jah('des.html','content');return false;">

A+

**santaflam** · 02/07/2010, 12h55

Merci pour l aide !!

Envoyé par supersnail

Bah même en PHP, tu rechargeras aussi complètement ta page ...

Je suis passé par PHP, et je constate en effet que la page est rechargée intégralement - comme dans le cas où je n utilise que du HTML en chargeant à chaque fois tte la page (menu header content) et dont j avais dit que c etait crade comme solution parce qu en l occurrence j aivais testé et constaté que toute la page se décale horizontalement d un demi centimètre dans le browser (i.E 8.0 vers. actuelle) -
Mais voilà toujours en local, je constate le même effet en PHP. Je me pose donc la question est-ce que c est dû au browser (i.E 8.0) oú bien au fait que je sois en local ? ... Parce que ca serait moche que cet effet persiste une fois le tout envoyé chez l hebergeur.

Nota: j ai utilisé une solution PHP proposée en réponse dans le forum XHTML (thread "substitution des frames"), utilisant include ...

**supersnail** · 02/07/2010, 14h08

Bonjour,

Tu peux nous montrer le code HTML de ta page? (je n'ai jamais rencontré ce genre de bugs lors d'un rechargement de page

)

**santaflam** · 06/07/2010, 15h54

Envoyé par supersnail

Bonjour,

Tu peux nous montrer le code HTML de ta page? (je n'ai jamais rencontré ce genre de bugs lors d'un rechargement de page

)

Merci !! J ai trouvé l erreur: ma page se recentrer automatiquement dans le browser avec la DOCTYPE :

Code html :

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

1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Il m a fallut donc faire le centrage par le CSS (margin-left et right: auto)

Code css :

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
html,body {
	height:100%;
/* marges permettent centrage sans effet secondaire -decalage dans browser */
	margin-left: auto;
	margin-right: auto;
	padding:0;
	border:0;
}
 
 
#container {
	width: 960px;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 0px;
	border: 0;
}

script pour ouvrir lien/LINK dans une DIV

JavaScript

Discussions similaires

Partager

Partager