[AJAX] Gestion de l'historique et des marque-pages

**PoichOU** · 11/09/2007, 12h05

Bonjour,

je voudrais savoir si on peut gérer l'historique et les marque-pages avec ajax.

Je m'explique : je développe un site qui contient un menu et lorsqu'on clique sur un élément du menu, je vais charger la page qui correspond dans une div.

Je voudrais donc savoir comment je peux faire pour gérer l'historique car si quelqu'un clique sur la page2 et fait précédent avec son navigateur il sort de mon site

idem pour les marque-pages, si il veut marquer la 2ème page comment faire ?

j'ai bien trouvé ce lien mais je ne suis pas vraiment "fluent in english"

quelqu'un sait quelques choses là dessus ?

voici un petit exemple de mon code :

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
45
46
47
48
49
50
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>exemple ajax</title>
  <script src="AppelAjax.class.js" type="text/javascript" language="JavaScript"></script> 
  <script type="text/javascript" language="JavaScript">   
  function charge(numPage)
  {
    switch(numPage)
    {
      case 1 : cache(2);cache(3);affiche(1);break;
      case 2 : cache(1);cache(3);affiche(2);break;
      case 3 : cache(1);cache(2);affiche(3);break;
    }
  }
 
  function affiche(numPage)
  {
    var div = document.getElementById("page"+numPage);
    if(div.innerHTML=="")
    {
      new AppelAjax("page"+numPage+".html",div.id,"",true,true);
    }
    div.style.display='block';
  }
 
  function cache(numPage)
  {
    var div = document.getElementById("page"+numPage);
    div.style.display='none';
  }
  </script> 
  </head>
  <body>
  <div id="menu">
    <ul>
      <li><a href="javascript:charge(1);">page1</a></li>
      <li><a href="javascript:charge(2);">page2</a></li>
      <li><a href="javascript:charge(3);">page3</a></li>
    </ul>
  </div>
  <div style="height:50%;width:100%;overflow:auto">
  <div id="page1"></div>
  <div id="page2"></div>
  <div id="page3"></div>
  </div>
  </body>
</html>