I have a single page application, and I want to reload, but whenever I run window.location.reload(true);, it refreshes to the homepage. For example, if I run it from www.mywebsite.com/test/1, it will open www.mywebsite.com, I simply want it to refresh to www.mywebsite.com/test/1, and I want it to happen from server, not from cache. Any ideas how to do it with pure JS?
Try
window.location = 'www.mywebsite.com/test/1'
It will still reload the page, but as long as your JS redraws based on the URL it should work.
IMHO a single page app should never call reload. You just draw and clear elements on the page.
Have you tried simple location.reload() ?
Related
If I am on the page http://mywebsite.com/contact and I do:
window.location.assign('http://mywebsite.com/contact#foo');
The page doesn't refresh and I understand thats desired. But I want to refresh/reload the page (to update the users cache). Is there a Javascript or JQuery function that I can use that will change the url and always reload/refresh the page?
Usecase
When a user clicks any anchor html element, my function checks if the page has been reloaded/loaded within the last 24 hours. If it hasn't I will call my javascript function above to ensure the user navigates to their desired page but also reloads the whole page to ensure they are working with the latest version of the Single Page Application.
Just put window.location.reload(true); after window.location.assign()
window.location.reload(true) will reload the page from the server.
window.location.reload(false) will reload from cache, if available.
I use Angular 2 (v2.4.4) and by using routerLink I navigate between the components.
This works fine, but if I load the very save component with the very same snapshot parameter (active.snapshot.params) the page won't get loaded again. So, for example if I am on /page/56 and I click on a link here which points to /page/56, the very same link (from a menu or something), the component won't reload. (And things might change in the database since the last load, so the page needs to be reloaded.)
I bypassed it by pointing to /jump/page/56 and the Page 404 controller redirects to /page/56.
This also works fine, but if I navigate back in the browser from /page/56, it will get to /jump/page/56 which directs to /page/56 by the Page 404 controller. So basically I cannot navigate back.
As much as I know, I cannot delete browser history by the HTML5 history API, but how could I go back to the page, which was right before /page/56, just by simply clicking on the back button of the browser?
The solution might be a simple JavaScript trick independent from Angular 2, as it does not actually load a new page just loads a different component and changes the URL. (Also because of this I should not use location.reload() because it will reload Angular 2 and all the depending JS, etc.)
Thank you for your solutions in advance!
you can use skipLocationChange Like :
this.router.navigate(['/jump/page/12'],{skipLocationChange:true});
Seems the only way is to create your own dicrective inherited from [routerLink] to control click handler or just add click handler to current element with managing refresh by yourself.
<a (click)="navigate(['/jump/page/56'])">Navigate</a>
where
navigate(route) {
this.router.navigate(route, {replaceUrl: true});
}
I need a quick js code to reload the page if it is cached. I need this too show changes to the page without having to refresh the page to make the changes appear. Thanks!!
You can force a non-cached reload in this way:
window.location.reload(true);
I have an HTML page. Everytime I add new content to the page, the user needs to refresh the page in order to see the new content.
What I want to do is to refresh the page automatically for them regardless of browser.
I tried putting the following but the screen flickers so many times that it does not prove to be useful:
<script type="text/javascript">
location.reload();
</script>
The JavaScript you show there does indeed reload the page. Every single time the page loads, as soon as it reaches that JavaScript. The flickering you're seeing is probably the fact that it in an infinite cycle of reloading. What you need to do is perform an AJAX request to the server to find out if there is new content, and then reload the page if there is. Or, alternatively, use the AJAX to actually update the new content on the page.
I'm having a performance issue on my web application when the user hits the "refresh" button on my webpages. The behavior is shown below:
$("#reloadbutton").click(function(){
location.reload();
});
It reloads all of the CSS, JS, and image files that the page needs, as it should. The only problem is that it does this for every other page request, such as clicking on a link to go to another page.
If I just hit the F5 button, it'll reload all of the CSS, JS, and image files, and then if I go to another page, it won't try and reload those files once I go to that other page. But if I hit the reload button on the page itself, it'll reload all of those files on every page request, and I don't want it to do that.
So I have a two part question:
How can I refresh without having the browser fetch all of the CSS, JS, and image files (because I want to minimize the time it takes to refresh each page)?
Why am I getting different behavior when using location.reload() as opposed to using the browser's own reload button?
Note: I'm currently using the latest version of Firefox
use the
$("#reloadbutton").live("click",function(){
location.reload();
});
and you can do this by making ajax call after every some second
$("#reloadbutton").click(function(){
location.reload(false);
});
As per the Mozilla developer network, location.reload(); can take a parameter. When it is true, location.reload(true);, it causes the page to always be reloaded from the server. If it is false, location.reload(false);, or not specified, the browser may reload the page from its cache.