I'm trying to reload my page every time the user puts my page in focus again or opens their browser. My code works, if the user is in the browser and changing pages, but it doesn't work if the user exit the browser (without actually shutting it completely down) and then opens the browser again, where my page would be the first site they see. I am testing this on chrome for android. Is there another event I need to listen for?
I am looking for a method to reload on all browsers as soon as the user enter my page, no matter what state it was in before - mobile browsers are especially important.
Code:
<script type="text/javascript">
onload = function () {
onfocus = function () {
onfocus = function () {}
location.reload (true)
}
}
</script>
This is a pretty crazy idea to reload the page all the time in full, your users will hate you. If you are going to do it, just do partial updates to the page.
Anyway, to answer the question, check the PageVisibility API(Chrome) or the specs. This event fires when the page is visible to the user either by bringing the app into focus or by changing tabs.
Related
So I am working on a testing application and I need to call a finsihTheTest() function (i.e. this function finishes the test by saving answers, time and other information) whenever following conditions occur:
User tries to reload page.
User tries to go back from the page.
User tries to close the tab.
User tries to close the browser window.
User goes to another url.
If anything happens that closes the page like laptop/PC shutdown, internet lost or anything else.
What I exactly want to do is, if once a user starts the test and by any mean he attempts to leave I want to save his state. Which is being done by the function finishTheTest().
I got a clue but it didn't work:
function UnLoadWindow() {
return 'We strongly recommends NOT closing this window yet.'
}
window.onbeforeunload = UnLoadWindow;
To get the full results for your cases there's many things you should now on how browsers react on many scenarios.
To understand more please read this section :
Especially on mobile, the unload event is not reliably fired. For example, the unload event is not fired at all in the following scenario:
A mobile user visits your page.
The user then switches to a different app.
Later, the user closes the browser from the app manager.
Also, the unload event is not compatible with the back/forward cache (bfcache), because many pages using this event assume that the page will not continue to exist after the event is fired. To combat this, some browsers (such as Firefox) will not place pages in the bfcache if they have unload listeners, and this is bad for performance. Others, such as Chrome, will not fire the unload when a user navigates away.
If you're specifically trying to detect page unload events, it's best to listen for the pagehide event.
window.addEventListener('pagehide', function(event) {
document.cookie = "saveData=test"
},false)
This way you can save your user current data and reload it on next page window load event
I'm writing a quiz site for a client and the entrant gets 30 seconds to answer each question on the page. If they switch to another tab or the window blurs, I want that window to load an error page. This is based off jQuery code I used in 2015 which used to work fine, now when I test it, the "Leave site?" prompt pops up infinitely.
The old code used to be:
$(window).blur(function() {
window.location = "<?=$server_url?>quiz_error.php";
});
I'm guessing the alert prompt itself is triggering another blur event and we are stuck in an infinite loop.
Is there a way to have this blur only trigger once so I can load the error page?
I tried
$(window).blur(function(e) {
e.preventDefault();
window.location = "<?=$server_url?>quiz_error.php";
});
but this didn't work either.
Many thanks :)
I am developing a web application. And I wrote some JS script to be executed on document ready. But in chrome when we click on back button and go back to previous page it is executing all the js script again. But when I use same on firefox it do not execute the JS.
I have an accordion on a page and when user open any accordion and go on one of the link under the accordion and after that if again clicks the back button on the accordion page chrome is closing all the accordions as I have written the script to close all these on document ready. But firefox do not close.
Is there any way to fix this with javascript? So that I can put any condition like if(history.forward.length < 1){ do this....}
You can use the pageshow event to guarantee you always detect navigation to a particular page, regardless of whether the user presses the back/forward button or selects a link, and regardless of which browser is being used.
Then you can perform checks regarding the state of UI and perform logic as required (i.e. modify UI, prevent execution of additional JS).
window.addEventListener('pageshow', function(event) {
// check state of UI, etc.
});
The solution that came to my mind is using sessionStorage to know if it is a first time loading or not. Or even better, you can keep state of your accordions in session storage so it always be the way the user want.
In my case, the iframe was a hidden iframe (width and height zero).
This iframe is just an workaround from legacy system, developed 12 years ago. But still using nowadays on current application.
To solve it, i just redirected the page loaded into iframe to the blank page.
Example:
page_loaded_into_iframe.php
<?php
//do the php stuffs
?>
<script>
alert("hello world");
location.href = "about:blank"; // here, where the the magic happens!
</script>
Once pressed the "back button", the browser will reload a blank page.
Be aware that this might be not applicable if your case is not similar to mine.
In the Chrome Extension you can use the function:
chrome.webNavigation.onCommitted.addListener(function callback)
and in the callback function you may take a look to the arguments:
transitionType + transitionQualifiers
to look for:
"forward_back" The user used the Forward or Back button to initiate the navigation.
For deatils see chrome.webNavigation
Of course, this event can be communicated to the content script with the usual message model (refer to: Message Passing
I am developing a SharePoint App that basically launches a form in a Windows 8 application once the action is clicked. This is working perfectly fine. However, once you select this action, you are redirected to a page that basically holds some parameters to launch the app. This page throws a window that asks the user if it's okay to launch the app:
How can I detect if this has been launched or not? Ultimately I'd like to detect if the user hits 'Allow' or 'Cancel' but either scenario will work. I am trying to redirect a user to the parent page once this window has launched (hopefully when the user clicks 'Allow'
Is this possible? I found a helpful thread here: http://support.smartbear.com/viewarticle/55730/
However, this thread is very useful but doesn't give me the answer I need. I've tried using jQuerys .blur and this works(ish). It isn't giving me a consistent response but looks like it's a step in the right direction (if I can't detect the window that launches). I've also tried the following code by using .hover but am receiving inconsistent results.
$(window).hover(function (event) {
if (event.fromElement) {
console.log("inactive");
window.location.href = "http://google.com";
}
else {
console.log("active");
}
});
At the highest level possible, I'm trying to redirect the user once the app is launched.
Thanks in advance for any helpful input.
I need to show a confirm dialog box when the user clicks the back button in mobile Safari. I have a long application, and I want to alert users that their application has not been filled out/completed before they leave the page. I have everything set up for when the user clicks a link and tries to leave the page, but I can not for the life of me figure out how to attach an event to the browser's back button. onbeforeunload does not work in iOS. Any tips would be much appreciated.
NOTE: I realize alert boxes are the spawn of satan, but that's what I was told to do.
You can check the persisted property of the onpageshow event. It is set to false on initial page load. When page is loaded from bfcache (user navigates back with back button) it is set to true.
window.onpageshow = function(event) {
if (event.persisted) {
alert("From back / forward cache.");
}
};
For some reason jQuery does not have this property in the event. You can find it from original event though.
$(window).bind("pageshow", function(event) {
if (event.originalEvent.persisted) {
alert("From back / forward cache.");
}
};
In desktop browsers like Chrome you can intercept the leaving of a page and show a message.
And you can't do anything, except for showing the message. The browser is doing the rest, for obvious reasons.
Dunno if this also works on iOS.
window.onbeforeunload = function () {
return 'do you really wanna do that?'
}
http://jsfiddle.net/JAAZ5/
Control over the back button has never been allowed in any browser. I suspect mobile Safari is no different.