Obtenir bouton retour pour travailler dans une seule page de site web et la mise en œuvre de “parler” Url

J'ai une seule page de site web et souhaitez atteindre les objectifs suivants:

  1. bouton de retour de travail, comme si c'était un site web normal
  2. et au lieu de dire,

www.mysite.com/index.php?p=#this-is-a-great-product

Je voudrais avoir cette url

www.mysite.com/this-is-a-great-product

tout en ayant encore de retour bouton fonctionne correctement.

Concernant 1.) J'utilise le code suivant ive trouvé qui fonctionne très bien:

<!-- Getting BackButton to  work properly -->
<script type="text/javascript">
var times = 0;
function doclick() {
    times++;
}
function doclick() {
    times++;
    location.hash = times;
}
window.onhashchange = function() {     
    if (location.hash.length > 0) {        
        times = parseInt(location.hash.replace('#',''),10);     
    } else {
        times = 0;
    }
}
</script>

...mais bien sûr cela ne modifie aucune des ancrages /#1, alors /n ° 2 et ainsi de suite ro obtenir le bouton retour au travail. Mais comme je ne suis pas un programmeur, je ne sais pas comment le changer... 🙁

Concernant 2.) je peux ajouter htaccess ceci:

>RewriteEngine On
>RewriteRule ^([^/.]+)/?$ /index.php?page=$1

et c'modifications /index.le php?p=produits /produits.

Alors, comment puis-je changer le code ci-dessus (sous 1.) afin de ne pas changer tous les ancres #1, #2, etc. mais au lieu de références et utilise l'url que j'ai obtenu moins de 2, comme

www.mysite.com/this-is-a-great-product

Et (probablement une question stupide, mais très important) -donné-je utiliser seulement la nouvelle url des liens sur mon site, est-il un danger que cela peut entraîner dans le contenu dupliqué?

À ce sujet, dois-je (pour cette raison ou une autre) sefreferential ma page unique index.php de lui-même à l'aide de rel canonical link=index.php?

Merci beaucoup d'avance!

OriginalL'auteur suri | 2014-01-29

  1. 1

    HTML5 fournit une api qui prennent en charge l'historique du navigateur et vous pouvez gérer les url sans avoir à recharger.

    vérifier ce lien

    http://diveintohtml5.info/history.html

    Démo est

    http://html5demos.com/history

    Existe-il des démos qui continuent à travailler sur l'actualisation? Je n'ai pas été en mesure de trouver un seul.
    Le lien ci-dessus html5demos.com/history de travail.
    Je veux dire, si j'entre l'URL dans le navigateur, pour que cela fonctionne. Si je saisis cette url, j'obtiens un fichier non trouvé: html5demos.com/history/fourth
    L'un de l'Autre est slides.html5rocks.com/#history-api

    OriginalL'auteur developerCK

  2. 1

    Comme mentionné précédemment, vous aurez envie d'utiliser le HTML5 Histoire de l'API. Veuillez noter que cette API est relativement nouveau et, par conséquent, prise en charge du navigateur est un sujet de préoccupation. Au moment de la rédaction, environ 71% des utilisateurs mondiaux d'Internet ont le support (voir http://caniuse.com/#feat=history pour la prise en charge du navigateur de l'information). Donc, vous voulez vous assurer que vous avez un solution pour ce. Vous aurez probablement envie d'utiliser l'ancienne #! la solution qui était populaire avant le HTML 5 de l'Histoire de l'API a été adopté.

    Si vous utilisez l'API de l'histoire de remplacer, par exemple, example.com/#!settings avec example.com/settings et un utilisateur de signets que plus agréable URL, puis, quand ils rendent visite, leur navigateur fera une demande au serveur pour /settings (qui n'existe pas réellement dans le serveur web du contexte). Par conséquent, vous devez vous assurer que votre serveur web a certaines règles de redirection (c'est à dire RewriteEngine), ce qui peut prendre les URLs propres et de les rediriger vers le #! version (et puis si le navigateur de l'utilisateur prend en charge l'histoire de l'API, il peut la remplacer avec de belles URL).

    Si vous n'êtes pas très à l'aise en programmation vous-même, je vous recommande d'utiliser une bibliothèque JavaScript qui fait beaucoup de travail pour vous. J'ai fait quelques rapides de la recherche et de découvrir la suite, mais il pourrait être mieux là-bas: https://github.com/browserstate/history.js

    OriginalL'auteur Kyle

  3. 1

    Fondamentalement, j'ai créé un petit prototype sur jsfiddle qui retrace tous les url consultées via des appels ajax.

    Contient également de navigation pour accéder à des liens de retour-et-vient .

    Comment Il Fonctionne Réellement:

    • J'ai créé un réseau mondial appelé history, qui garde la trace de toutes les url consultées via ajax dans la séquence.
    • aussi il y a un mondial index défini pour garder une trace de l'url en cours d'accès lors de la navigation en arrière et en avant les liens dans history tableau.
    • Il est History section au bas de la jsfiddle, qui indique l'ordre dans lequel les liens sont accessibles en capturant les noms de lien et de les afficher dans l'ordre dans lequel ils ont été consultés.

    Code JS:

    $(function () {
var history = [];
var index = 0;
$('.links').on('click', function () {
    $('#history').append($(this).text());
    var address = $(this).attr('data-ref');
    index += 1;
    history[index] = address;

    $('.links').attr('disabled', 'disabled');
    loadExternalPage(address);
    console.log('list:' + history);
});

$('#back').on('click', function () {
    console.log(index);
    index -= 1;
    console.log(index);
    console.log(history[index]);
    loadExternalPage(history[index]);
});

$('#forward').on('click', function () {
    console.log(index);
    index += 1;
    console.log(index);
    console.log(history[index]);
    loadExternalPage(history[index]);
});

var loadExternalPage = function (address) {
    console.log(history[index]);
    $('#result-section').load(address, function () {
        console.log('data-loaded');
        $('.links').removeAttr('disabled');
    });
};
});

    Démo Live @ JSFiddle:http://jsfiddle.net/dreamweiver/dpwmcu0b/8/

    Remarque: Cette solution est loin d'être parfait, afin de ne pas l'envisager comme une solution définitive, mais plutôt de l'utiliser comme une base pour construire sur

    Le violon n'est plus disponible 🙁
    Existant jsfiddle lien a été endommagé, maintenant, il a été mis à jour, amusez-vous bien 🙂

    OriginalL'auteur dreamweiver