Page reload once before loading any of the other content - javascript

I want to reload my site (only once) before loading any of the content. I implemented this option but the user is still able to see the content of the page before going for reload.
Here is my code
window.onload = function() {
if(!window.location.hash) {
window.location = window.location + '#loaded';
window.location.reload();
}
}
How can I implement this functionality without showing any of the content to the site visitor.

You mean you don't want your user to see any of the content on the page before you trigger the reload?
If you mean 'see', like visually see the content, you could always put a div that blocks the entire viewport, and then remove it once the page has been reloaded.
But to me, this seems like an issue that could be resolved by not adding anything to the document body until your conditions have been met. You should design your code in such a way that a refresh is not needed, as that is creating unnecessary requests.

Related

Reload page dynamically

I create a dashboard to which I added a modal box which proposes to save or to go back. To go back, I need to reload the page (so that the data will return to the initial state). I used javascript and this script works but the problem is that the browser shows that the page is reloaded (I would like to reload the page dynamically). Do you have an idea to reload the page dynamically?
current code:
function cancel() {
close();
document.location.reload();
}
To my knowledge there is no way to do this automatically. You will have to fetch all your values asynchronous and repopulate your Html.
Or perhaps put your entire dashboard inside an iframe and call document.location.reload(); inside that.
That should stop the browser showing the reload animation. I have not tried it though.

Chrome/Safari - window.scroll on page load

I am working on a project where my client is asking to load the page on the top. Here is the requirment
Whenever you refresh the page, no matter where you are in browsing, the page must refresh at the top of the page.
To get this, I used two functions window.scroll(0,0) and scrollTop(0) at document load.
jQuery(document).ready(function(e){
window.scroll(0,0);
});
And
jQuery(document).ready(function(e){
jQuery("body,html,document").scrollTop(0);
});
I get the desired results in browsers using any of the above two codes except in Chrome/Safari.
This is what I am experiencing in Chrome/Safari. Let's say that I am at the bottom of a page, then if I refresh it, then I get the events in the following sequence.
Page loads at the point where I was at the time of refresh. (Bottom - Page loading).
Then the functions mentioned above work and get me to the top of the page. (Still loading).
At last, when the page fully loads, it takes me back to where I was at the time of refreshing the page i.e. at the bottom.
You can check it at this page.
I have also tried to put a timeout function as.
jQuery(document).ready(function(e){
setTimeout(function() {window.scrollTo(0, 0);},500)
});
Now, this works one some pages but not on all. So I am looking for a better way than mine.
Thank you.
You should use something like this:
$(document).ready(function(){
$(this).scrollTop(0);
});
Edit: Chrome/safari:
$(window).on('beforeunload', function() {
$(window).scrollTop(0);
});

Prevent browser from keeping iframe url when reloading the parent

I have a form inside an iframe. As soon as the user saved the data I redirect the iframe to a page that does nothing more than reloading the main page (as some other content depends on what was inserted inside the iframe). So the data outside the iframe ist updated and the form should appear again.
The problem: at least firefox (haven't tested it in other browsers yet) keeps the "new" url of the iframe with the redirected page and not the one that is set by sourcecode. Something similar to autocompletion with input fields.
I do the reload by
parent.location.reload();
Is there maybe a way to force a real reload without keeping any information from the history of the containing iframes?
btw: I may use jQuery if it helps.
Thanks.
You could try something along these lines (http://jsfiddle.net/AKykZ/):
document.querySelector('button').addEventListener('click', function() {
document.querySelector('iframe').setAttribute('src', document.querySelector('iframe').getAttribute('src'));
window.top.location.reload();
return false;
}, false);
In the fiddle, click the link in the iframe, and hit the reload button. It sounds like you're reloading from the iframe, but this should at least get you on the right track.
Found the solution. It is pretty funny but doing the reload by
parent.location.href = parent.location.href;
makes a fresh reload of the page without keeping the history. Haven't tested it in other browsers though.

Maintain redirection inside iFrame

I am building an application where I want to load a page from another server into my page. The particular page that I'm pulling data from depends on a query that is being run (with OAuth access) on that foreign server. Once I get the URL for that page, I am loading it in an iFrame and displaying it on my page.
The problem is, the URL that the query gives me is actually to a page that forwards three times before getting to where I actually want to go. To make things more complicated, it also has frame-buster code on the initial page. I set my page to redirect to a page that returns a 204 status on page unload so as to beat the frame-buster, but now it's just stuck displaying the initial blank page instead of the content I want, which is at the end of three redirects.
My initial idea was to try to capture the code for the outgoing location request on page unload. I had hoped to be able to see where the user is being redirected to and load that request inside the iFrame instead. Repeat three times to get the correct page in the iFrame. Intuitively, however, this felt like it shouldn't be able to work, and of course it does not because letting pages see where their users are going to upon leaving a site would be a major privacy issue.
Next, I was thinking that maybe I could just parse each new page in turn as it was loaded into the iFrame to find the script for the redirect. I'm pretty sure it's done on the server side, however, since looking at the code I was getting didn't turn anything up.
I started looking for ways to maintain that redirection inside the iFrame. That is, allow the redirect to occur, but force it to stay inside the iFrame while also preventing the frame-buster code from doing anything. This would be the easiest solution, but I can't find a good way to do it. Right now, I just have a blank page loading inside an iFrame, and I think there's something on the server side that performs the redirect that isn't running in the iFrame. The frame buster code only prevents the entire document from changing, not the iFrame. Is there a good way to do this or am I going about things the wrong way?
To prevent the frame buster, from here:
<script type="text/javascript">
var prevent_bust = 0
window.onbeforeunload = function() { prevent_bust++ }
setInterval(function() {
if (prevent_bust > 0) {
prevent_bust -= 2
window.top.location = 'http://server-which-responds-with-204.com'
}
}, 1)
</script>
load the first page via curl locally, strip the busting code, make all links absolute and display that in the iframe.
it should redirect as espected and do your merry thing.
Good luck making all the urls in the document absolute. Dont forget javascript urls and functions you might need to override by pasting in your owncode after the script tags.

How do I control the behavior of window.location in Javascript?

At the bottom of my page I have window.location = ...
I wish my page (let's call it jspage) to load, and then only once everything is fully loaded do the redirect. At the moment I get "stuck" on the referring page while jspage is processing, then jspage flashes up for a tiny instant and I am redirected
You can put your redirect to OnLoad handler of body, or use jQuery $(document).ready() to put your code in, or add timout and stay for some time on your jspage for better control of time when redirect happens.
But I'd start figuring out why you are "stuck" on referring page. It very well could be caused by slow server side processing of jspage rather than browser rendering (use Fiddler or Net tab of FireBug in Firefox to see when page actually comes back from server).
I would go with onload event of the window, and in there put small timer e.g. two seconds to ensure user will see the splash screen. Code for this would be simply:
<script type="text/javascript">
window.onload = function() {
window.setTimeout(function() {
document.location.href = "otherpage.html";
}, 2000);
}
</script>

Categories

Resources