Message for reloading a webpage - javascript

I want to prevent users from reloading the page each time to get updated dynamic content. So I have used this code:
window.onbeforeunload = function() {
return "Dont need to reload the whole page. Just reload the section";
}
It's working fine except when an user closes the browser's tab/window, the same message is showing also. But I want to show the message only for reloading/F5 button, not for closing the browser's tab/window. What event handler should I have to used for that purpose?

You can physically disable the f5 button, to get functionality similar to what you want:
Disable F5 and browser refresh using javascript

Related

Userscript only works if I interact with the page first

I'm trying to automatically click a Login button in Chromium after a particular URL loads.
(function() {
'use strict';
// Your code here...
setTimeout(function() {
document.getElementsByTagName('button')[0].click()
}, 4000);
})();
If I run document.getElementsByTagName('button')[0].click() in the browser's javascript console, it works.
If I click somewhere on the page in between the page loading and the userscript's click event firing, it works.
But if the browser opens to the page and the script fires without any other interaction, I get a "Login failed" error from the page, which is the same error it would show if the password or username were wrong. But the password and username were filled in by the browser already.
Initially I tried the https://getautoclicker.com extension and tried all kinds of things like having it fill in the text fields rather than letting the browser do it, but it has exactly the same problem.
How do I simulate whatever happens when the mouse clicks somewhere on the page?
Even if I use xdotool to press Ctrl+F between the browser loading the page and the script firing, the script works.

What is the difference between clicking the refresh button in the browser and selecting the link and pressing enter?

In my web application,I have made a pin popup which is supposed to popup and disable the rest of the screen after a timeout. When the page is refreshed(Ctrl+R) or clicking on the refresh button, the pin popup appears, but if the link is highlighted and enter key is pressed, the popup does not come.
How is the (click on link and press enter) different from a (Ctrl+R) or clicking on the refresh button?
Please Help
Thanks in advance.
Generally: clicking on a link (or tab to and enter/space) starts a new GET (get from scratch (like open a new browser and paste the url in the address)).
While refresh/ctrl-r resends the previous command - if this was a POST then you get another POST.
You can use ctrl-f5 for a new GET.
In addition: Any element on a page (specifically a link in this case) may have an event handler applied which can stop the default action.
So, if yout link has an event handler that contains e.preventDefault(); or return false; (eg <a href='...' onclick='return false;'>link</a>) then it would appear that nothing is happening.
Pressing enter/space on a focused link is the same as clicking it (runs the .click() event handler).
Clicking Refresh or Ctr+R reloads page by making a fresh server request. In this case, making a server request is done for sure which is not the case when you just click & enter the link in address bar. In 2nd scenario, it just reloads the page. It mayor may not go to server but reloads it from browser cache.

How can I detect that the browser back button has been pressed in a single page app?

On a certain page in my app, I have a popup guide that walks the user through several steps. When the user clicks the popup next button it advances, sometimes going to a new page (but not always). My problem is that when the user clicks the browser back button, the popup does not close and causes issues if the user tries to advance again. What i'd like to do is just close the popup if the user hits the browser back button. I'd assumed this would be an easy problem, but I can't figure out a solution.
Since this is a SPA, 'onbeforeunload' and 'onunload' don't fire. The way the app is setup, 'onpopstate' also doesn't fire. 'hashchange' fires, but it also fires sometimes when the user clicks the next button on the popup, and I don't see a way to differentiate between that hashchange and hashchange when the user clicks back.
Is there some other event I can check for? I just want to run a function to close my popup (and do cleanup) when the user clicks the back button.
The following assumes you do not use the history API:
Often times I have seen use of # (the anchor tag) in the URL. This will allow for navigation throughout a single page without refreshing the page. As the user progresses in the workflow. For example,
window.location.href = "http://stackoverflow.com/questions/36408418/how-can-i-detect-that-the-browser-back-button-has-been-pressed-in-a-single-page" + "#test"
will not refresh the page. When the back button is pressed, the following statement will evaluate to be true:
(window.location.href == "http://stackoverflow.com/questions/36408418/how-can-i-detect-that-the-browser-back-button-has-been-pressed-in-a-single-page")

how can I prevent the user leaving the page when hitting the browser back button in Jquery Mobile?

Just wondering.
I have a page in Jquery Mobile which uses a popup that opens as a fullscreen page on smartphone displays:
Desktop/Tablet:
Smartphone:
Problem is, if the user views the page on smartphone, this looks like a real page. When the user hits the "back" button I provide, I'm just closing the popover. However, if the user hits the browser back button, he's leaving the page, because he never went a page down in the history.
Question:
Since I can't disable the browser back button, is there another way to create a browser history entry when the popover opens, so when the user presses the back button, I'm simply closing the popover and the browser history is back on the initial page vs. going "-1". If there are other workarounds to achieve this I'd also appreciate any suggestions.
Thanks!
Maybe what you can do is add the popover as a dialog page if the webpage is opened from a smartphone (you can use user-agent to check for this). You might want to check http://jquerymobile.com/test/docs/pages/page-dialogs.html That way it will be added to the browser history.
Try adding a live Vclick.
or
you could try disabling the class ui,
Example:
class="ui-disabled"

JavaScript body onunload not working

Hi I have the following code:
function redirect(){
window.location.href='logged_out_chat.php';
}
...in my header and the following body tag:
<body onunload="javascript:redirect();">
...when i try this on one laptop, it redirects as it is supposed to (when you click on any link), but on my other laptop, desktop and notebook it ignores the redirect and goes to any link you click on.
I have spent hours on this...all have the same browser. I was wondering if there is an alternative way i could redirect the user when they click on a link etc.
What do you expect would happen?
When I close your page in my browser you get to redirect me to a page of your liking?
This goes againts security and user control. You shouldn't be able to interfere with the page when I close it.
The morale is don't rely on onunload to do anything non-trivial.
When a window unloads it stops processing everything, that means ajax requests, pending downloads etc, most even freeze animated gifs. Some browsers support onbeforeunload, but I completely agree with #Raynos you can't count on the event, so using it is not a good design decision.
You can't hijack onunload and redirect the user. That would prevent the user from closing their browser, refreshing the page, or manually navigating to another site. If that's what you are trying to do, you are out of luck. All onunload is good for is asking the user if they are sure they want to leave the page.
If, however, you are trying to cause a clicked link to go to a different location, that's easy. To change the link permanently:
myLink.href = 'logged_out_chat.php';
If you want to change the links temporarily, add a click handler that you can later remove:
function goToLoggedOutChat(e)
{
e.preventDefault && e.preventDefault();
e.returnValue = false;
location.href = 'logged_out_chat.php';
}
mylink.onclick = goToLoggedOutChat;
To re-enable the link:
mylink.onclick = null;
To do it for every link on the page:
for (var i=0; i<document.links.length; i++)
{
document.links[i].onclick = goToLoggedOutChat;
}

Categories

Resources