ici est quelque chose qui devrait faire ce que vous voulez en utilisant jQuery:
(function($){
var history;
function getHistory() {
var tmp = $.cookie("history");
if (tmp===undefined || tmp===null) tmp = "";
if ($.trim(tmp)=="") tmp = [];
else tmp = tmp.split("||");
history = [];
$.each(tmp, function(){
var split = this.split("|");
history.push({
title: split[0],
url: split[1]
});
});
}
function saveHistory() {
var tmp = [];
$.each(history, function(){
tmp.push(this.title+"|"+this.url);
});
$.cookie("history",tmp.join("||"),{ expires: 60, path: "/" });
}
function addToHistory(title,url) {
var newHistory = []
$.each(history, function(){
if (this.url!=url) newHistory.push(this);
});
history = newHistory;
if (history.length>=10) {
history.shift();
}
history.push({
title: title,
url: url
});
saveHistory();
writeHistory();
}
function writeHistory() {
var list = $("<ul />");
$.each(history, function() {
var element = $("<li />");
var link = $("<a />");
link.attr("href",this.url);
link.text(this.title);
element.append(link);
list.append(element);
});
$("#history").empty().append(list);
}
$(document).ready(function(){
getHistory();
var url = document.location.href;
var split = url.split("#");
var title;
if (split.length > 1) {
title = $("#"+split[1]).text();
} else {
title = document.title;
}
if (title===undefined || title===null || $.trim(title)=="") title = url;
addToHistory(title,url);
url = split[0];
$("a[href^='#']").click(function(){
var link = $(this);
var href = link.attr("href");
var linkUrl = url+href;
var title = $(href).text();
if (title===undefined || title===null || $.trim(title)==="") title = linkUrl;
addToHistory(title,linkUrl);
});
});
})(jQuery);
Mettez dans un fichier js que vous incluez dans al l vos pages. Vous devez également inclure jquery.cookie.js avant qu'il (http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/)
Votre page doit être formaté comme ces deux pages de test:
[history.html]
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="history.js"></script>
<title>My First Page</title>
</head>
<body>
<h2>PAGE ONE</h2>
<h3>History</h3>
<div id="history"></div>
<h3>Links</h3>
<a href="#part1">Page 1 -Part 1</a>
<a href="#part2">Page 1 -Part 2</a>
<a href="history2.html#part1">Page 2 - Part 1</a>
<a href="history2.html#part2">Page 2 - Part 2</a>
<h3>Parts</h3>
<h4 id="part1">Part 1 of the First Page</h4>
<h4 id="part2">Part 2 of the First Page</h4>
</body>
</html>
[history2.html ]
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="history.js"></script>
<title>My Second Page</title>
</head>
<body>
<h2>PAGE TWO</h2>
<h3>History</h3>
<div id="history"></div>
<h3>Links</h3>
<a href="#part1">Page 2 - Part 1</a>
<a href="#part2">Page 2 - Part 2</a>
<a href="history.html#part1">Page 1 - Part 1</a>
<a href="history.html#part2">Page 1 - Part 2</a>
<h3>Parts</h3>
<h4 id="part1">Part 1 of the Second Page</h4>
<h4 id="part2">Part 2 of the Second Page</h4>
</body>
</html>
Notez que le titre utilisé pour le bloc historique est le texte de la balise par le lien ciblé si elle est un href #something ou le titre de la page si ce n'est pas .
Tout codeur ayant une certaine connaissance de jQuery pourrait l'adapter à vos besoins spécifiques.
Alors, quelle est votre question? Voulez-vous que cela soit rechargé via AJAX? – Seb
Fondamentalement, oui via AJAX. c'est l'équivalent d'avoir l'historique du navigateur déversé dans la DIV sur le site, et entre les sessions. – Adrian33
vous m'avez perdu au "chargement des variables statiques dans la page actuelle" pourriez-vous éditer votre question pour clarifier? –