i am learning on how to use pushState to navigate url to the exact placement. When click on the button, url changes to 'upload' but does not navigate to the url page. This is what i tried;
home.html
<button onclick="loadUpload()">Upload Page</button>
<div id="upload"></div>
<script>
function loadUpload(){
history.pushState({}, "", "/upload/");
document.getElementById("upload");
}
</script>
The entire point of pushState is that it doesn't trigger navigation. It is a mechanism for saying "I am changing the state of the DOM using JavaScript, the resulting state is the same as you would get if you visited this URL" (while making the back and forward navigation buttons built into the browser work).
If you want to navigate with JavaScript then assign a new value to location.href.
location.href = "/upload/"
However, since your JavaScript doesn't do anything except navigate, you should just be using a regular link for this in the first place:
Upload Page
Related
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);
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
I am able to redirect/replace the url from the below code
function replceUrl(){
window.location.assign("https://www.example.com");
event.preventDefault();
}
After replacing the url, I want to stop page reload. I have added event.preventDefault(), but the page still reloads.
How to prevent page reload after replacing the url is the challenge
event.preventDefault() won't help you there, its purpose is to prevent the default behavior of the event that fired the function.
You won't be able to change the URL without reloading the page unless you use History API or window.location.hash
History API will let you change the last URL segment without reloading the page with this code: history.pushState({some: 'data'}, "New title", "new-url-segment") while window.location.hash = 'something' will let you change the URL fragment.
Note that the URL fragment's original purpose is to create links that scrolls to a specific id in the page once it's loaded.
I am creating a slideshow which is changing images with jQuery. When i change the image i also change page title and page url without reloading the page. I am changing url with:
window.history.pushState({path:url},'',curentImage[3]);
rightNav.click( function(){
imageArea.append(curentImage[2]);
title.text(curentImage[4]);
window.history.pushState({path:url},'',curentImage[3]);
});
If i click back on browser it changes the url to previous one, but doesn't load that page. How can i load page with previous url when i click browser back button?
I have just figured out the solution that helps in my case. I have added event listener for popstate which is redirecting me to the url i wan, some default url, or can be set to previous url.
window.addEventListener("popstate", function(e) {
window.location.href = defUrl;
});
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.