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.
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.
Okay I changed the plan. How would I create a bookmarklet that refreshes a link and clears cache until a page change is detected?
Edit: this might help (from JavaScript Bookmarklet; click button, reload page, then open page):
If a page reloads, any code currently running on that page, including code from a bookmarklet, is ended and removed. Traditionally bookmarklet code ceases to work after a page load and user clicks it again.
There are three workarounds that I know of.
A.) Change the process that loads the page to instead use AJAX.
B.) Change the process that loads the page to instead open a new window, and then use JavaScript to manipulate the new window.
C.) Before triggering the page load, open a new child window and insert code into it. The code in that child window can then monitor its parent and take actions on the parent even after the parent has reloaded.
Edit 2: this refreshes the page, so now I just need to clear cache on each refresh and stop when a page change is detected (overall function is like a page monitor but clears cache after each refresh).
---or----
javascript:
timeout=prompt("Set timeout [s]");
current=location.href;
if(timeout>0)
setTimeout('reload()',1000*timeout);
else
location.replace(current);
function reload(){
setTimeout('reload()',1000*timeout);
fr4me='<frameset cols=\'*\'>\n<frame src=\''+current+'\'/>';
fr4me+='</frameset>';
with(document){write(fr4me);void(close())};
}
Edit 3: found this for clearing cookies (which should be sufficient):
Edit 4: this checks for page changes:
Now how do I put this together?
I am running a script locally and in one of the functions, it goes to different page. Once it does that, I want it go to back to previous page and continue running the script locally.
Is there a way to go back to previous page without refreshing the page.
I used parent.history.back(); this goes back to previous page but refreshes the page so my script stops running.
Is there a way to go back to previous page without refreshing the page?
TL;DR - The short answer is "No"
There is no way to go back without "refreshing" the page.
"refresh" is a somewhat vague term without an exact technical meaning ...
Going "back" by any means, whether it's the browser's back button or your .history.back() tells the browser to load the previous page it holds in its history.
Whether the page is loaded from the browser cache or re-requested from the server is up to the browser, not up to you.
In any case, it is again up to the browser whether it will re-parse the DOM and/or re-render the page. Which, in reality, it is going to do.
Any of these could be called "refresh".
At that time, however, the browser will start parsing and executing any scripts present. It will not continue wherever it was in the scripts at the time the page unloaded under any circumstances.
The page the browser goes back to is the HTML text as it was received from the server, but scripts could have significantly modified the DOM after the page was loaded. Those scripts need to run again, from the beginning, when the page is reloaded by going back.
It's conceivably possible to write a browser that saves the DOM state and js execution state when you leave a page, and restore that state when you return, but no such browser exists.
Depending on what your actual goals are for this, there are many things that could be done such as pushState() and replaceState(), single-page web applications, XMLHttpRequest, using <iframe>, etc. where you could replace the current page content (DOM) with other content without actually going "forward", and restore the saved DOM later when you "return" to the page,
but that's far too large a topic for a Stackoverflow question.
I'm not 100% following your question, but from my notes I can offer you this:
// To some url
window.location.href = 'some/new/url';
// To some url without it effecting browser back history:
window.location.replace('some/new/url');
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() ?
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.