Si vous souhaitez utiliser une seule structure d'URL qui pourrait fonctionner pour les JS et les navigateurs capables/activés non-JS, vous pouvez vérifier si le navigateur prend en charge JS et modifier les liens de navigation en conséquence. Si le navigateur prend en charge/a activé JS, ajoutez un hachage et récupérez la page en utilisant window.location.hash
. Exemple URL:
site.com/#photos/1
Si elle ne prend pas en charge JS votre URL ressemblerait à ceci:
site.com/photos/1
De cette façon, il vous suffit d'ajouter un #
à l'URL. C'est facile à faire, soit dans le script lui-même, ou changer les liens sur la page en utilisant jQuery après le chargement de la page. Vous pouvez utiliser (en supposant Apache/PHP) ModRewrite Apache de réécrire l'URL à quelque chose comme:
site.com/index.php?p=photos&show=1
Dites les charges de site pour la première fois et le navigateur ne supporte pas JS, charge tout ce qui doit être chargé de la façon normale, en fonction (dans ce cas) les variables "page" et "show". Si tel est le JS de soutien, vous pouvez stocker les variables comme ceci:
<div style="display:none;" id="page">photos</div>
<div style="display:none;" id="show">1</div>
<div id="content"></div>
et après la page que vous est chargé feu vers le haut jQuery et extraire les données de navigation:
var page = $('#page').html();
var show = $('#show').html();
et faire tout ce qui doit être fait pour montrer la page correcte. Lorsque vous cliquez sur les nouveaux liens, vous pouvez utiliser les différents plugins jQuery pour la navigation de hachage, ou la page se chargera simplement de la manière normale quand il n'y a pas de JS et donc pas de hachage dans les liens.
Pour éviter la duplication de code, vous devez configurer vos pages de sorte qu'elles puissent être facilement affichées de la manière habituelle et via jQuery. Disons que vous avez cette page de photos, vous pouvez inclure un « photos.php » lors de la navigation sans JS et utiliser le même fichier en utilisant jQuery:
$.get(page + '.php', {
show: show
}, function(data) {
$('#content').html(data);
});
Depuis le « photos.php » verra les mêmes $_GET
exactes des variables, la sortie sera la même.
va se chevauchent cependant. Si vous souhaitez afficher/poster un formulaire, par exempleVous allez probablement gérer cela différemment par rapport à la façon normale de gérer cela via jQuery. La façon normale de traiter les données de formulaire et d'afficher une page mise à jour. Donc, dans le cas de "photos.php", vous aurez besoin de sortie complète. Mais lorsque vous utilisez jQuery, vous ne voulez qu'un résultat par ex. dit "fait" et changez la page sans la recharger entièrement. Cela peut être résolu en ajoutant quelques variables supplémentaires aux fonctions $.get
(ou $.post
).
Vous voudrez peut-être vous intéresser aux frameworks MVC (PHP). Lorsque vous utilisez une configuration MVC, vous pouvez séparer toute la logique du site (navigation/requêtes de base de données/etc) de la vue (c'est-à-dire ce qui est affiché sur le site). Il est très facile d'utiliser la même logique, mais séparer vues pour, dans ce cas, un site avec la navigation normale et jQuery. En fin de compte, vous devez vous demander si cela vaut la peine de traverser tous ces problèmes. Pour qui est le site? Est-ce que ces personnes utilisent vraiment les navigateurs sans JavaScript? Est-il vraiment nécessaire d'avoir un site disponible qui ne repose pas sur JS? De nos jours, la plupart du temps, tout le monde utilise un navigateur qui peut gérer JS très bien, et le temps que les gens le désactiver pour des raisons de sécurité a disparu depuis longtemps. Maintenir les deux versions d'un site peut prendre beaucoup de temps et de ressources (en fonction de la taille du cours), donc cela ne vaut peut-être pas la peine. Dans ce cas, il est plus facile d'afficher simplement un message ou un site simplifié indiquant que l'utilisateur devrait entrer dans le 21ème siècle pour utiliser le site entièrement fonctionnel.