I have a request axios(vue):
.then(response => {
history.pushState(null, null, response.request.responseURL);
}
Standart URL - http://localhost:30/shop. With this line, I complete the URL. in the end it will look like: http://localhost:30/shop?tags[]=5
But when I go to another page (http://localhost:30/shop/parts/2123 ) and then click the back button. Then I see not the page, but the response of the request (just text).
How i can resolve this problem?
upd: with FF working fine. Only when using google chrome.
What history.pushState does is change the value of the URL in the search bar and push a new URL to browser history; it does not change anything in the DOM. The browser doesn't take "screenshots" of your current page state, so when you go back it only changes the URL on the address bar and the history, but no UI changes.
Based on your code an post, I believe you wanted to redirect the user, which is done easily with:
window.location.href = response.request.responseURL;
Edit
Based on your comment, you can use history.replaceState instead of pushState, which won't add changes to history, thus not breaking the back button:
history.replaceState(null, null, response.request.responseURL);
Related
In my play webapp, web I click back button of browser, the URL changes but the page does not change. Similarly when I click the front button, after navigating back, the URL keeps changing but the webpage remains the same.
So if I am on localhost:9000/A/B/C/D and I click back, the URL will change to localhost:9000/A/B/C but the webpage remains the same. I checked the network in browser console and no request is being sent to the router/backend. On reloading the page, the webpage expected from a particular URL loaded.
To solve this issue I added a javascript file which listens to the event popstate and everytime I press back(The URL chanegs) and it reloads the page from the URL.
By doing this a request is sent via the Router and which is expected to be seen gets loaded. This however is causing me problem. When I do this, the front button of the browsers gets greyed out. window.history.forward(1) gives me undefined. Similar is the case with window.history.back(-1).What should I do? Please help.
My play framework project flow looks something like this:
routes
GET /person/:height controllers.ViewController.person(height: Int)
controllers.ViewController.person
def person(height: Int): EssentialAction = cached.apply(req => req.path, cacheDuration) {
withoutLoginAction { implicit loginState =>
implicit request =>
Ok(views.html.person(Option(height)))
}
}
person.scala.html
#import controllers.actions.LoginState
#import controllers.view.OtherApp
#(personHeight: Option[Int])(implicit requestHeader: RequestHeader, messagesProvider: MessagesProvider, otherApps: Seq[OtherApp], loginState: LoginState = null)
#if(personHeight.isEmpty) {
#views.html.index(Option(constants.View.BLOCKS))
} else {
#views.html.index(Option(""))
<script>
componentResource('explorerContent', jsRoutes.controllers.ComponentViewController.person(#personHeight.getOrElse(1)))
</script>
}
Longer description of what is happening:
URI: http://localhost:9000/person/height/78478
On clicking back URI changes to
URI: http://localhost:9000/person/height
But the webpage remains same.
On clicking back again:
URI: http://localhost:9000/person
But webpage is still same.
On clicking forward:
URI: http://localhost:9000/person/height
and webpage is still same
I have a 3 step signup process where each step is shown on the page using javascript without a page refresh. What I am trying to do now is add a back reference to what step the user was on so if they click the browser back button they will not lose all of their progress.
So for example, as the user navigates from Step 2 to Step 3 the URL stays at www.example.com. The user then clicks the browser back button. The URL should now be www.example.com?step-2.
I'm thinking that I will somehow need to use the History API to accomplish this but if I use window.history.pushState(null, null, 'www.example.com?step-2'), the current URL would be changed as well.
How would I accomplish adding to the history without changing the current URL?
If your objective is to not change the URL, but to still allow back and forth history state changes, your best bet would be to utilize the window's hashchange event listener. This would of course utilize hash references within the URL, but the base URL won't change:
function locationHashChanged() {
if (location.hash === '#step-2') {
// Do something here
}
}
window.onhashchange = locationHashChanged;
For further info on this, refer to official documentation:
https://developer.mozilla.org/en-US/docs/Web/API/Window/hashchange_event
Goal: Omit the id param from my page AND able to reload the current page.
Original URL: www.onecompany.com/dept?id=12345&name=myName
I was able to get the modified url.
Modified URL: www.onecompany.com/dept?name=myName
I used this code:
window.history.pushState(null, null, modifiedUrl);
And the page load successfully without the id param.
But when I refresh the page (I want to reload the current page), it did not load
www.onecompany.com/dept?id=12345&name=myName
but it load this
www.onecompany.com/dept?name=myName
When I attempted
window.history.pushState(null, null, originalUrl);
The refresh works but one part of my goal is failed, not omit the id param.
I am lost in a circle.
My question: Is it possible to load my page (with id param omitted) AND able to refresh the page (to load the correct page without id param)?
Thanks for any advice !
I guess, you're trying to hide the information 'id' for the user. I would recommend to use cookies to save the information 'id'.
Otherwise:
//Example: 'www.onecompany.com/dept?id=12345&name=myName'
var query = window.location.search;
var oldquery = window.location.search;
query = query.replace(/id=\d+&?/i, '');
console.log(query);
//Out: ?name=myName
window.history.pushState(null, null, query); //then hide the id
You have to change the URL back to the original, before the user leaves the website. This will not work.
But if youre willing to do, you could listen for the window.onbeforeunload event and change the query back again to oldquery. See here: Handle refresh page event with javascript - But there are a lot of differences between browsers, on how they will process the window.unbeforeunload event. They will usually not allow to do that.
I have the following code that is executed on a button click:
location.replace(window.location.href.split('?')[0] + _new_urli);
My url looks like: https://mywebsite.com/website/?page=page1
For the sake of example we have:
Current behavior:
After location.replace() the current url stays in history and user can click back to it
Desired/intended behavior:
If successful the user will be forwarded. If they press back will not be able to visit the page i used location.replace on.
This is the described functionality on: http://www.w3schools.com/jsref/met_loc_replace.asp
You could probably use the historyof navigation.
Something like history.go(-2); should work.
If you want to modify url you can have a look at history.pushState(null, null, "newURL"); or in your case probably more history.replaceState().
The thing is the back button does not keep change so if your data is changed on page 3 you need an other way to pass it to the browser which could be the state object (the first parameter null) that can be set as {object: value,...}
This while probably interest you too. The thing is without knowing the behaviour of your site its difficult to help you find a proper solution. I hope this will inspire you.
In facebook, whenever you navigate to a different URL (in some situations), the URL changes but there is no feeling sensed as going to a different page.
For example: when we view pictures in facebook, and when we move to the next image the URL changes in the address bar
FROM >facebook.com/foo?bar=foobar&xxxx=
TO > >>facebook.com/foo?bar=boobar&xxxx=
and this is not hashed change also
like
FROM >facebook.com/xxxxx#xxx=xxxx
TO > >>facebook.com/xxxxx#xxx=yyyy
How is this possible seamlessly. I mean how is that only a container is modified on URL change. URL change is supposed to navigate to a different page which can contain cached information from previous page and THIS navigation by URL change can be seen obviously by browser's screen going blank for a moment.
If using an iFrame, how to implement this ?
I use somehting similar to this
try {
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page", href);
loadPage(href);
}
catch(e) {
window.location.hash = "#!/"+href;
}
If it supports the HTML5 pushState them change URL, but if it doesn't then the fall back is the window hash.
wow. I just asked it few minutes ago ... use search next time ;)
Dynamic favicon when I'm proccessing ajax data
Modify the URL without reloading the page
There's a jQuery plugin called "address" that will watch for changes and call the function you give. I think it's just checking the URL every 100ms or so.
They issue an AJAX request for the data necessary to fulfil the "navigation", then tell the browser to "go to #xxx=yyy". Since such an anchor doesn't exist, the browser doesn't actually scroll down. However, it does record a new history entry, and also updates the URL so that if someone copy-pastes that URL, they will view the same object that the user is seeing, rather than just the original page.