Reload page after some time on mobile devices - javascript

I have a page that gets the contents from a servlet. The page gets updated with javascript every minute. When the mobile wakes up (I am using jquery.wakeup-plugin ) and it was 'asleep' for more than 60 secs, I call :
location.reload(true);
or
window.location.href = window.location.href;
First line works for Chrome and Firefox but not for Safari, and the second line doesn't work for Safari and Chrome.
It reloads the page, but the page doesn't update. It shows the content before it went to sleep. After pressing F5 all browsers reload just fine.
Any tips on how to fix the refresh?
var bell_id = $.wakeUp(function(sleep_time) {
if (sleep_time > 59000) {
//location.reload(true); NOT WORKING FOR SAFARI
window.location.href = window.location.href;
$.ignoreBell(bell_id);
}
});

U mean like that?
$(document).ready(function() {
setInterval(function() {
cache_clear()
}, 60000);
});
function cache_clear() {
window.location.reload(true);
// window.location.reload(); use this if you do not remove cache
}

Related

What is wrong with this JS functions in Firefox works in Chrome doesn't?

When i enter in this page I want to print information and when I am done with it ,I want to redirect me to previous page. And when I enter in previous page I want to reload page automatically one time.In Firefox works perfectly in Chrome doesn't.
print function
$(document).ready(function() {
window.print();
window.location.reload(history.go(-1));
});
when entering the page reload function
(function () {
window.onpageshow = function(event) {
if (event.persisted) {
window.location.reload(true);
}
};
})();
Thank you for your help I fixed the problem with one function
$(document).ready(function() {
window.print();
window.location.replace(document.referrer)
});

JS Redirect if Cookie Exists

I'm using a simple .html page to redirect someone to page A if they don't have a cookie. If they do have the cookie I want to send them to page B.
The issue I'm having is someone will get redirected to page A, but when they push the back button on page A, the .js isn't executing on my simple .html page and sending them to page B. Instead, the blank .html page is loading and that's it.
//this function fixed Safari
window.onpageshow = function(event) {
if (event.persisted) {
window.location.reload()
}
};
window.onunload = function() {}; // this seems to have fixed Firefox
setTimeout(function() {
if (document.cookie.indexOf("visitedinhour=") >= 0) {
// They've been here before.
window.location = 'https://www.google.com';
} else {
// set a new cookie
document.cookie = "visitedinhour=true; max-age=" + 3600;
window.location = 'https://www.bing.com';
}
}, 200);
What I'd like to happen is someone visits my .html page, is redirected to page A, then click the back button, and are redirected to page B.
UPDATE: Firefox seems to work as intended. Chrome and Safari don't. Chrome goes back to the page before my .html page and Safari still loads the blank .html page.
UPDATE 2: Safari is fixed; Chrome isn't working as intended. When on Bing.com and you click the back button the browser goes to the page it was on before my .html page with this code.
This could be a known issue in Firefox.
Try to set an empty function to be called on window.onunload:
window.onunload = function() { };
This is because Firefox (and Safari, and Opera) keeps the website intact. it does not immediately destroy your page to go onto the next one, which results in a much faster and smoother back/forward page transitions for the user.
Update
This should work for Safari (it will force a reload when page is loaded from bfcache):
window.onpageshow = function(event) {
if (event.persisted) {
window.location.reload()
}
};
Update 2:
This code should be compatible with all browsers although you may need to use the above snippets too.
window.addEventListener("pageshow", function (event) {
var historyTraversal =
event.persisted ||
(
// Check if performance not undefined (restored from cache)
typeof window.performance != "undefined" &&
// Check if the back button was used
window.performance.navigation.type === 2
);
if (historyTraversal) {
// Handle page restore and reload the page
window.location.reload();
}
});

Javascript SetInterval Not Working in IE

I am using window.open to open a popup window and setinterval function to wait and refresh the background page, once the popup is closed.
the code is working fine in Chrome and Firefox but is not working in IE.
Basically the issue is: in IE, it doesn't wait until popup window is closed. It immediately gets refreshed as soon as the popup opens up.
I saw the issue coming in both IE 9 & IE 11.
Any solution for this?
This is the code:
var url = "/apex/VFP_Add";
var win = window.open(url, "Add" ,"width=600, height=300, scrollbars=yes");
win.moveTo(500, 100);
win.focus();
var timer = setInterval(function() {
if(win.closed) {
clearInterval(timer);
window.location.reload();
}
}, 500);
I put alerts just before if(win.closed) check and just after the check. For the first alert, it showed as False. In second alert, after "if check", it showed True. This is very weird because i had not closed the window.
It seems that's a known bug in IE. See this article about it: https://support.microsoft.com/en-us/kb/241109
Their solution is to basically negate the value of win.closed when you detect that it's running in IE. Something like:
if(win.closed || isRunningInIE()) {
clearInterval(timer);
window.location.reload();
}
There are different ways to detect IE, so you can just use your favorite method in place of that isRunningInIE() function.

Jquery function firing in safari but not in chrome

I have a function where I scroll to the page to the top when the page loads with document.ready(). However in Chrome this function only runs when I'm on the page and I refresh it.
If I access the page by typing the link in the address bar, the function doesn't run. If I access the page from a link from another page, it also doesn't run. The only way it runs 100% of the time in Chrome is if I'm on the page and I refresh it.
However, in Safari, the function runs 100% every single time by accessing the page from a link, typing it in the address bar, on reload.
This is my code:
jQuery(document).ready(function($) {
if (location.hash) { // do the test straight away
window.scrollTo(0, 0); // execute it straight away
setTimeout(function() {
window.scrollTo(0, 0); // run it a bit later also for browser compatibility
}, 1);
//location.reload();
}
});
This actually also works in Safari without putting it in document.ready() but then again not in Chrome.
Does anybody know what causes this and if this is possible to fix?
I've had this problem before and it was extremely frustrating.
Just increase the setTimeout delay time 20ms or more then 20ms, it may be because of 1ms is too short time of interval.
$(document).ready(function() {
if (location.hash) {
window.scrollTo(0, 0);
setTimeout(function() {window.scrollTo(0, 0);}, 20);
}
});

window.onbeforeunload listener not triggering on tab close in Firefox

The Problem
I have a function that should run on window.onbeforeunload. In Chrome, this works correctly and runs whenever a tab or window is closed or refreshed. In Firefox, however, it only runs on refresh, not close.
The Code
Here is an example:
var onStorageUpdate = function(){
var lastUnloaded = localStorage.getItem("LastUnloaded");
if(lastUnloaded === null){
$("div").text("Never stored");
}
else{
$("div").text(lastUnloaded);
}
};
onStorageUpdate();
window.addEventListener("beforeunload", function(){
var now = Date.now();
localStorage.setItem("LastUnloaded", now);
});
window.addEventListener("storage", function(){
onStorageUpdate();
});
Here is the order of events that should work in the above code:
On initial page load, attempt to get LastUnloaded from localStorage. If nothing is retrieved, show "Never Stored", otherwise show the value that was stored (should be a long integer timestamp)
Upon unloading a tab, updated LastUnloaded with the current timestamp. This is the part that doesn't seem to work in Firefox when closing a window.
Upon change in localStorage, update the DOM to show the timestamp
Demo
Here is a codepen of the example: http://codepen.io/jakelauer/full/NqRyqQ/
In order to test it, open the link in two different windows or tabs. You should notice that when you refresh either tab, both tabs update to show the same timestamp. In Chrome, you will notice that if you close one tab, the other tab will update its timestamp. In Firefox, you will notice that the timestamp does not get updated.
Any ideas? Thanks in advance!
I ended up just using onunload, which worked fine everywhere.

Categories