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>
Related
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.
There is a way to detect when the page is being redirected?
Example, I put a timeout for X seconds and if the page wasn't redirected (the user still in the page) it will kill the timer except if the page is being redirect... because some redirections can be freeze (delay, lazy)... so it will re-program the timer instead of kill it...
the readystate will change if the page is on a redirect?
How to detect if the page is on a redirect using javascript?
Thanks
window.onbeforeunload = function(e) {
return 'Dialog text here.';
};
this function fires when the user is leaving the page, but it is very limited in what can be done in it. For example you cant fire an ajax call and wait for a return in this function.
Read more here
https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload
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);
});
Can I not use setTimeout() in a bookmark?
This works:
javascript:
document.location="mysite.com";
alert("test");
void(s);
This does not:
javascript:
document.location="mysite.com";
var t=setTimeout(function () {
alert("test");
}, 10000);
void(s);
Why is this?
Each time you change a page the entire javascript context is destroyed and recreated(This for security reasons and the fact that a context hell would be made)
document.location="mysite.com";
efectively changes the context of the page destroying any javascript reference left(in your case the timeout). The moment the new page has started loading your page has a new context.
for your timeout to work you would need a server that takes more than 10 seconds to respond(based on your second argument 10000 or to reduce the timeout to something like 10 ms).
document.location="mysite.com";
var t=setTimeout(function () { alert("test"); }, 10);
why would you need this?
Bookmarklets can do no more than what normal embedded script on a web page can do. If you can't do it with normal JavaScript, you can't do it with a bookmarklet.
In your example, if run as normal javascript embedded in the page, as soon as the page reloads the timeout would be gone, along with all other variables from that page. (Don't be mislead by the fact that JavaScript embedded in script tags will be re-run as the page is loaded. That would create a new timeout, but the previous one would be deleted.)
A more precise test would be to put your bookmarklet code into an a hyperlink on the page and click it (test). That is exactly the same as clicking a bookmark containing the same code. What you cannot do with this, you cannot do with a bookmarklet.
SOLUTIONS TO YOUR PROBLEM:
Option 1: Bookmarklet creates an iframe inside the current page, and continuously reloads the desired page inside that iframe.
Option 2: Bookmarklet opens a small window and inject javascript into it which continuously reloads the opener window.
I have a web app with some 'safety' code which causes a page reload if the server (Socket.IO) connection goes silent for more than 5 seconds (generally customer site firewall/broken-proxy issues).
The Socket.IO connection stops as soon a new page starts loading, but the safety code doesn't see this. Navigating to a slow page causes the safety code to fire and jump you back to the previous page.
I need to be able to tell (just before this code causes a reload) whether the browser is currently waiting for a new (slow) page to load.
What approaches are there to doing this, other than putting a jQuery click event on every link (which would not catch navigation via the address bar)?
Thanks,
Chris.
Monitoring window.onbeforeunload would do the trick. Fires right after the user starts navigating away.
Try typing this in the Chrome Console on any page and click on any link:
window.onbeforeunload = function () { console.log("oh noes"); }
My recommendation: fix your code so that you don't reload the page when the socket disconnects. Problem solved.
Edit
I suppose you could simply set a variable such as isReloading when the page reloads. You'd need to monitor onbeforeunload as well, and check what happens first: disconnect or the unload event. If the disconnect happens first, you're getting disconnected. Trigger the isReloading flag and reload. In the onbeforeunload check whether the flag was set. Reverse the concept of checking whether a slow page is loading: check whether you are reloading.