This question already has answers here:
Disabling Back button on the browser [closed]
(12 answers)
Closed 8 years ago.
I have web app which contains iframe. In main part client communicates with server by ajax, additionally i added beforeunload = function(){ return "something";} , so when user clicks browser back button alert will appear, when user clicks leave the page, he will lose session and login page will show. In iframe part i use servlet, so when user clicks browser back button alert won't appear because only iframe page will unload. Now what i want to achieve. While user is manipulating in iframe, when he clicks browser back button then alert should appear and when user click leave page i want to log off whole app. When he clicks don't leave page inside iframe shouldn't reload.
I tried to solve this using two events beforeunload and unload.
This is inside iframe:
var confirm = false;
var clicked = true;
$(window).on('beforeunload', function(evt){
if(confirm){
return "Text";
} else {
clicked = false;
}
});
$(window).on('unload',function(evt){
if(clicked){
$(this).off('beforeunload');
window.parent.location = window.parent.location + "/error";
}
});
Now when user manipulating in iframe clicks back button browser, alert appears. When clicks leave page is working good, log out. But when clicks don't leave, the page in iframe will back to earlier and i don't why:(. I want to prevent it.
One cannot disable the browser back button functionality only thing that can be done is prevent them.
Below is the JavaScript snippets that needs to be placed in the head section of the page where you don’t want the user to revisit using the back button
<script type = "text/javascript" >
function preventBack(){window.history.forward();}
setTimeout("preventBack()", 0);
window.onunload=function(){null};
</script>
Suppose there are two pages Page1.aspx and Page2.aspx and Page1.aspx redirects to Page2.aspx
Hence to prevent user from visiting Page1.aspx using Back Button you will need to place the above script in the head section of Page1.aspx as shown below.
Here is the original article: http://www.aspsnippets.com/Articles/Disable-Browser-Back-Button-Functionality-using-JavaScript.aspx
Related
I have a privacy warning dialog that users can either click accept button, click decline button, click close button or click a link on the page to bypass - working with what Im give here. I need to fire a function if a user clicks a link on the page instead of clicking on any of the warning dialog's buttons.
The native unload handler gets blocked in some cases and also fires on page refresh. The hashchange event doesn't work as Im not using hashed urls. So I'm trying to capture the first page pathname, then on unload compare to the new page pathname and if they aren't equal run a function. Something isn't right here:
var origURL = window.location.pathname.slice(1);
$(window).unload(function(){
var newURL = window.location.pathname.slice(1);
if($(origURL) != (newURL)){
//run function if page changes
} else {
//page hasn't changed - do nothing
}
})
Is there a better way to detect page change? I can't attach to a click event, as some links are done w/JS and not on an anchor.
When I press and hold the browser back button or just right click the back button I can go back pages. But I need to disable it. Is there any way to do that with javascript or jsp
Open A New Window without Back Button
browser-back-button-viralpatelThis one is very crude technique. But in some case it works like charm. All you have to do is to open the webpage in a new window. This window doesn’t have back button at all because we have hide the toolbar.
This technique does work in some case but user has still a workaround to navigate to previous page. Most of the browser have options of Back in context menu. Thus user can still right click on the page and click Back to go to previous page. We will shortly see the workaround for this issue also.
Following is the code to open webpage in a new window have no toolbar (Back/Next buttons).
window.open ("http://viralpatel.net/blogs/",
"mywindow","status=1,toolbar=0");
Also it is possible to disable the right click on any webpage using Javascript. Add following code in the webpage.
<body oncontextmenu="return false;">
Disable Back functionality using history.forward
This is another technique to disable the back functionality in any webpage. We can disable the back navigation by adding following code in the webpage. Now the catch here is that you have to add this code in all the pages where you want to avoid user to get back from previous page. For example user follows the navigation page1 -> page2. And you want to stop user from page2 to go back to page1. In this case all following code in page1.
<SCRIPT type="text/javascript">
window.history.forward();
function noBack() { window.history.forward(); }
</SCRIPT>
</HEAD>
<BODY onload="noBack();"
onpageshow="if (event.persisted) noBack();" onunload="">
The above code will trigger history.forward event for page1. Thus if user presses Back button on page2, he will be sent to page1. But the history.forward code on page1 pushes the user back to page2. Thus user will not be able to go back from page1.
Warn User if Back is Pressed
You may want to warn user if Back button is pressed. This works in most of the cases. If you have some unsaved form data, you might want to trigger a warning message to user if Back button is pressed.
Following Javascript snippet will add a warning message in case Back button is pressed:
window.onbeforeunload = function() { return "You work will be lost.";
Reference
just use
window.onbeforeunload = function() { window.history.forward(1); };
or if u like to warning user
window.onbeforeunload = function() { return "Back button is not available!"; window.history.forward(1); };
Let's say I have an update page in HTML5 and if the user edited a field, I want to show a pop-up whenever the user will exit the page (by clicking on another link) without clicking the update button. The pop-up will confirm if the user wants to save his edits or if the user declined, simply continue on the link he clicked before. How to achieve this in HTML5/JavaScript? Is there any function that preempts redirects? Thanks.
Use the onbeforeunload event.
Check out the demo: onbeforeunload Demo
JS code:
<script language="JavaScript">
window.onbeforeunload = confirmExit;
function confirmExit()
{
return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
}
</script>
I have a “pop-up” web page inherits from System.Web.UI.Page in a plug-in which is a part of a large web framework. The markup is inside <asp:Content> below. I need to perform some actions (updating the page behind) when the user clicks on “Close” button (id = _close) and when the user clicks on the ‘x’ button on the right corner of the page. My page is not displayed in the browser. I got the “onclick” (in the code behind) to work for “Close” button below, but I don’t know how to detect when the ‘x’ button is clicked. I tried on window.beforeunload and window.onclose, it doesn’t work. “Hello World” pops up when my web page opens and when I click “Close” (_close) button.
How do I handle for the click on the ‘x’ the same way when “_close” button is clicked?
<script language="javascript">
function doClose() { alert('Hello World!'); } window.onload = doClose(); // also tried with window.beforeunload </script>
You can execute the code on the opener. Write a method in opener and execute it from the pop-up window.
http://www.w3schools.com/jsref/prop_win_opener.asp
When I try to close my Google docs tab with unsaved changes, this is what I get in my browser (FF 3.5).
Are you sure you want to navigate away
from this page?
You have unsaved changes in this
document. Click Cancel now, then
'Save' to save them. Click OK now to
discard them.
Press OK to continue, or Cancel to
stay on the current page.
My question is whether such alerts are part of the web app (gdocs for eg.) or are they given out by the browser? If latter, how is this done?
By the browser. It's the beforeunload event handler that returns the customized text of the dialog, which is only the middle of the three paragraphs - the other two paragraphs as well as the text of the buttons cannot be customized or otherwise changed.
window.onbeforeunload = function(){ return 'Testing...' }
// OR
var unloadListener = function(){ return 'Testing...' };
window.addEventListener('beforeunload', unloadListener);
Will yield a dialog that says
Are you sure you want to navigate away from this page?
Testing...
Press OK to continue, or Cancel to stay on the current page.
You can nullify this by setting the handler to null
window.onbeforeunload = null;
// OR
window.removeEventListener('beforeunload', unloadListener);
The alerts are part of the web application. View the source code and look at the javascript.