Comment gérer le bouton Précédent avec JavaScript

J'ai un seul site de page fait avec <div> tags se déplaçant, se cachant, ect .. Je dois être en mesure d'avoir le bouton arrière contrôle les fonctions de mes divs.Comment gérer le bouton Précédent avec JavaScript

J'ai fait ma recherche pas comment faire cela et j'ai rencontré l'article this.

J'ai inclus ce code dans mon site et il fonctionne très bien pour mettre à jour l'URL en incrémentant les numéros de hashtag chaque fois que l'utilisateur clique sur un bouton avec la fonction doclick() attachée.

var times = 0; 
function doclick() { 
    times++; 
    location.hash = times; 
} 
window.onhashchange = function() {  
    if (location.hash.length > 0) {   
     times = parseInt(location.hash.replace('#',''),10);  
    } else { 
     times = 0; 
    } 
    document.getElementById('message').innerHTML =  
     'Recorded <b>' + times + '</b> clicks'; 
}

J'ai 4 boutons sur mon site appelant DoClick()

<div onClick="edit(); doclick()">Editorial</div> 
<div onClick="vfx(); doclick()">VFX</div> 
<div onClick="audio(); doclick()">Audio</div> 
<div onClick="color(); doclick()">Color</div>

Je ne suis pas assez expérimenté pour voir comment faire ce que je dois cependant.

Maintenant que je stocke chaque clic dans un nouveau hachage, comment puis-je utiliser ces données pour appeler des fonctions spécifiques que j'ai déjà configurées? Ou peut-être y a-t-il une meilleure façon de modifier afin qu'au lieu de simplement ajouter # 1, # 2 etc .. URL reflétera le nom de la page. Comme www.site.com/vfx - Et je pourrais utiliser cette information pour appeler une fonction.

Exemple d'utilisation:

Nous commençons à la page d'accueil www.site.com
utilisateur clique EDITORIAL BTN - divs passer dehors, sur le éditorial, l'URL lit www.site.com/editorial
L'utilisateur clique sur le commutateur VFX BTN - divs, maintenant sur la page VFX. URL lit www.site.com/vfx
utilisateur clique sur le bouton retour - appelle maintenant même modifier la fonction() et retourne à www.site.com/editorial

Source

2017-10-05 NewCodeMan

Je pense que cela devrait aider - https://stackoverflow.com/questions/1844491/ intercepter ing-appel-au-dos-bouton-dans-mon-ajax-application-je-ne-veux-pas-à – sahutchi

Avec HTML5, il y a une API d'histoire , ce qui vous permet de changer l'état du navigateur, et de changer le nom de chemin de l'URL, mais ne rechargez pas la page, lorsque les boutons forward ou backward sont cliqués, la page se comportera comme si votre page avait été rechargée, mais c'est ne pas.

S'il vous plaît vérifier cet exemple:

var target = document.querySelector(".content"); 

//Initiate the state. 
history.replaceState({ 
    title: document.title, 
    content: target.innerHTML, 
}, document.title); 

//When the buttons forward or backward is clicked, change the state of 
//browser, and replace the target's content. 
window.onpopstate = function(e) { 
    if (e.state) { 
     document.title = e.state.title; 
     target.innerHTML = e.state.content; 
    } 
}; 

//Assuming you're using Ajax to load remote data. 
$.get("/something", function(data){ 
    history.pushState({ 
     title: data.title, 
     content: data.content, 
    }, data.title, data.url); 
    document.title = data.title; 
    target.innerHTML = data.content; 
});

Si vous n'êtes toujours pas comprendre ce que je dis, s'il vous plaît vérifier mon site du projet récent, bien qu'il utilise WebSocket pour charger des données à distance, vous pouvez voir lorsque vous cliquez sur les éléments de documentations, la page ne sera pas rechargée, mais le contenu et l'URL seront modifiés.

http://cool-node.hyurl.com:3000/Docs

Et pour plus de commodité, j'ai enveloppé cette API à un seul plug-in, vous pouvez le vérifier à

https://github.com/Hyurl/soft-loader

Ou, par ailleurs, vous n'avez pas réellement besoin pour recharger des données à distance, ceci est juste un exemple, vous pouvez stocker votre contenu partout où vous voulez, à distance ou local dans le <body>, etc

Source

2017-10-05 05:17:01

Comment gérer le bouton Précédent avec JavaScript

Répondre

Questions connexes