I have a web service generating a html and I need it to be automatically refreshed in the browser every 10 seconds. I've done it simply with <meta http-equiv="refresh" content="10"> and it worked fine, preserving the scroll position (at least in Firefox).
Then I added some internal linking within the page, using e.g. Foo to link to <a name="foo"/>. After clicking such a link, I jump to the appropriate section and #foo is appended to the URL in the address bar, as expected. But if the automatic refresh happens now, #foo disappears from the address bar and the page scrolls to the top after refresh.
Is there some way to keep automatically refreshing the page, keeping the scroll position and being able to use internal linking without breaking it all?
UPDATE
I've tried to change the meta to <meta http-equiv="refresh" content="10;url=page.html#foo"> (without Javascript for now, just directly this value to see if it works). I open the page as page.html, it refreshes once as page.html#foo and then it stops. Why doesn't it keep refreshing?
It's unfortunate that the whole page needs to be reloaded, and you're not able to just do an AJAX call to get the data.
Since your page needs to be refreshed every time, you could consider storing the scroll position in local storage and reading it when the page loads again. That code might look something like this:
document.addEventListener("DOMContentLoaded", function(event) {
var scrollpos = localStorage.getItem('scrollpos');
if (scrollpos) window.scrollTo(0, scrollpos);
});
window.onbeforeunload = function(e) {
localStorage.setItem('scrollpos', window.scrollY);
};
If you would like to refresh the page and keep the anchor link, you can use JavaScript instead of a meta refresh tag:
setTimeout(function() {
location.reload();
},10000);
You could try client side routing.
Eg youresite.com/path#section2
"#section2" refers to an id of your DOM element.
When ever you refresh this URL it should land you to id section2 of your DOM.
In your document.ready you could first parse the url using window.location.href and scroll to the found id.
I think this may solve your issue. :)
Related
I am trying to implement a single page application in knockout and at a point I am clicking a link to go back to a page. The URL is changing but it is still remaining on the same page. Only on refresh it is going to the required page.
I am using window.location.hash = "#/home" to set the link in the URL.
Any idea what can be done so that the page actually changes according to the URL.
Use event onhashchange like,
window.onhashchange = function(){
// change your page content here
}
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 have a HTML with following script:
<script type="text/javascript">
function doRefreshWithInterval() {
setTimeout("doRefresh()", 60000 );
}
function doRefresh() {
window.location.reload(true);
}
if (window.location.href.indexOf("Dashboard.jspa") >= 0) {
doRefreshWithInterval();
}
</script>
To make a page refresh periodically. The problem is when I scroll down the page (it is a long page), and refresh happens on some browsers (specially Firefox) the browser goes to top of the page and not where I was. Is there some way to prevent this, and make Firefox scroll down to the last position after refresh?
A solution that comes to my mind is:
Before refresh, get the vertical position of the page
Store that number in a cookie
Refresh
On page load, see if there is a cookie for page position
Scroll to that position via script
Actually, you only need to make one tiny change to your existing code. Change document.location.reload(true); to document.location.reload();.
Using true you force the browser to get the page from the server again, which means your place on it will be lost. When you remove the true, the browser loads the page from the cache, preserving your place on the page.
This may not be helpful, however, if the reason you're automatically reloading the page is to get the latest version of the page that the server may have modified.
Tested with Firebug in Firefox 12.0.
Is there any way through which i can have a javascript on a page to redirect any url that's present on the page to some specific site.
For example on a HTML page i have say 10 urls present. Can i add a javascript to the HTML page so that if anyone clicks on any url on that page, it gets redirected to the a specified page.
Thanks.
EDIT::
My scenario is i have some 13k links on a page and i do highlighting of terms on the page, even if any link is also clicked on the page, the word gets highlighted on that page. In order to do that i process each url and add some more info to it to go thought my server perl script which does the job of highlighting. But now due to large number of links on page, it takes time to process the page and page is rendered after a long time. So i want to have a javascript which can pass any link by adding info to my perl script on server.
I tried doing it server side my breaking page into pieces and processing in parallel but not much improvement.
Any other solution or suggestions are welcomed.
Appreciate your help in this regard.
You can use preventDefault in the click event handler to prevent the default behavior(open the link), and use location.href to redirect to a new page.
if you're using jQuery:
$(".links").click(function(event){
event.preventDefault();
location.href = "http://google.com";
});
You can do this with the following jQuery block:
$(document).ready(function () {
$('#urlId').live('click', function (e) {
e.preventDefault(); //Stops the link from opening
window.location.href = "/specifiedPage"; // Changes the location of the page
});
});
You can create a "protective glass" div in front of everything and handle the click event on that div. This has the advantage of not touching the page so after removing the div anything can go back to normal.
Only be sure to put a non-fully-transparent color on the div background because I've found that Internet Explorer ignores events if the div is fully transparent.
Something like rgba(0,0,0,0.001) is enough.
I've got an ASP.NET page that takes a long time to download and returns partial results as it's loading (as per my previous question). On the page I have some links to download files, ie. the response headers contain "Content-Disposition: attachment", so that the browser doesn't navigate away from the page. However, if the user clicks one of these links while the page is still loading it stops loading - normal behaviour, but not what I want in this case. I can get around that by adding target=_"blank" to the links, but this momentarily opens a new window and the closes it again (once the browser realises it's an "attachment"). Is there any way to avoid having those links stop the current page load without this new window trick? JavaScript is OK.
You could put a hidden iframe on the page and target that. (or use javascript to generate one dynamically).
Not sure it if will help, but try to add an iframe to the page and have your links do document.getElementById('your_iframe').location = 'your_url'
You could try a meta refresh
<meta http-equiv="refresh" content="2;url=http://path.to/file.download">