Since you are loading these pages dynamically the correct would be to use the History API and save this "new state".
As you have not posted any code of how you will manage calls (.load()
) this example assumes that:
- the "rooting" will be fired in the event
click
- the "route" will be a value in the attribute
data-value=""
on the button
- a "container" will serve to display the loaded content
- when returning to the default status of the history (null) the container is clean
EXAMPLE
<body>
<div id="container"></div>
<button type="button" data-value="pagina1.html" class="navigate">Carregar pagina1.html</button>
<button type="button" data-value="pagina2.html" class="navigate">Carregar pagina2.html</button>
<button type="button" data-value="pagina3.html" class="navigate">Carregar pagina3.html</button>
<script src="path/to/jequery.js"></script>
<script>
$('.navigate ').on('click', function() {
let target = $(this).attr('data-value')
$('#container').load(target, function() {
history.pushState(target, "", "/")
})
})
window.addEventListener("popstate", function(evt) {
if ( evt.state ) {
$('#container').load(evt.state)
} else {
$('#container').html('')
}
}, false)
</script>
</body>
On the pages a simple <h1>
indicating on which page this...".
The initial status of the history is null
, when arriving at start state (case of return) just display its default interface.
When you say: "navigate between pages 1,2 and 3" Does that mean you’re searching these pages "dynamically"? If that’s the case, there’s no browsing history on the site, there’s no going back...?
– Lauro Moraes
I search dynamically, and create a session in the browser, so I refer to using this session to assign when returning.
– Neo
How will you use the session to come back? When speaking session, what kind in which language exactly (PHP?)?
– Lauro Moraes
Yes, with php. Let’s say I save a string in the session, like 'pagina1', so I’d like to know some command with jquery, so I can do . load() of the page, when executing the browser back, with this string.
– Neo
Okay, I get it. But, reason with me: if no navigation has been done anywhere in the domain, then the back button will not work for your purpose. The way would be to add to the history for example: when doing
.load('pagina1.html')
add to historypagina1.html
and so for the other uploads...so the back button works bad, the url changes.– Lauro Moraes
You can store views as cookies.
– Atila Silva
even q saves up the page he is searching for in cookies, as he could use the back button if there is nothing in the history?
– Lauro Moraes
You would need a command with jquery, which references this session string at the time of coming back.. like . pushState().. something like that, but I don’t know which.. there is the . Session() of jquery tbm.. I would like to know how to implement, and how to call the return function
– Neo
Atila Silva, what’s your idea?
– Neo
Lauro, regarding the historical, there must be a way to create it dynamically..
– Neo
Keeping the URL clean is probably a bad experience for the user, after all the purpose of the Urls is to make it intuitive where it is located and make use of the history and bookmakers (favorites).
– Guilherme Nascimento
Just for the record, there’s no way to dynamically manipulate the history, it’s based on Urls, the only thing you’ll get with pushState to keep the url clean is to have in the current tab the back and next of the Paggings, if you could change the history directly it would be a serious security breach regarding user privacy.
– Guilherme Nascimento
William, considering a system, there are Readcrumbs to the intuitive user experience in relation to their navigation. The code of @Tobias just below seems to arrive very close to what is needed.
– Neo
Both historical and bookmarks rely on their own Urls for each item you want to present, even for google this is a requirement, canonical Urls of preference. Removing this feature from the user, being a normal site is a big problem, both for indexing and for the user in relation to the use of browser tools, this would also complicate in feed systems, as they would not have Urls to point to. To be honest, this seems to me just an aesthetic resource, without any need, I would advise you to create friendly Urls: https://answall.com/q/128341/3635
– Guilherme Nascimento
@Guilherme, your thoughts are directed to a website, when in fact I’m referencing a system. They are different needs.
– Neo
@Neo this was not so obvious, but being a closed system it would not be more interesting to create an APP that would make the Urls less evident, something like Electronjs?
– Guilherme Nascimento
@William, I’ll see the Electronjs, how it works, interesting tool. But as I have another way to develop currently that meets well, I need to implement some specific things.
– Neo
@Neo beyond the
ElectronJS
quoted by @Guilhermenascimento, you can also study a little aboutPWA
. Besides, this requirement of yours, it looks a lot like aSPA
. Perhaps a tool that will help you, is theQuasar Framework
, be itPWA
orElectronJS
– Tobias Mesquita
@Tobias, I stopped the quasar showcase, they implement a description in the url, and the content is dynamically loaded with ajax, making it possible to return. I’ve seen something like this before, but how to do it. It would just be that detail. And the code you put below seems to solve me tbm, I just haven’t been able to test yet
– Neo