This question already has answers here:
How can I stop the browser back button using JavaScript?
(38 answers)
Closed 8 years ago.
Locked. This question and its answers are locked because the question is off-topic but has historical significance. It is not currently accepting new answers or interactions.
I want to disable the back button for a website.
Whenever the person clicks on the browser back button it should not be able to go on the page the user visited before.
history.pushState(null, null, document.title);
window.addEventListener('popstate', function () {
history.pushState(null, null, document.title);
});
This script will overwrite attempts to navigate back and forth with the state of the current page.
Update:
Some users have reported better success with using document.URL instead of document.title:
history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
history.pushState(null, null, document.URL);
});
One cannot disable the browser back button functionality. The only thing that can be done is prevent them.
The below JavaScript code 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>
function preventBack() {
window.history.forward();
}
setTimeout("preventBack()", 0);
window.onunload = function() {
null
};
</script>
Suppose there are two pages Page1.php and Page2.php and Page1.php redirects to Page2.php.
Hence to prevent user from visiting Page1.php using the back button you will need to place the above script in the head section of Page1.php.
For more information: Reference
Our approach is simple, but it works! :)
When a user clicks our LogOut button, we simply open the login page (or any page) and close the page we are on...simulating opening in new browser window without any history to go back to.
<input id="btnLogout" onclick="logOut()" class="btn btn-sm btn-warning" value="Logout" type="button"/>
<script>
function logOut() {
window.close = function () {
window.open('Default.aspx', '_blank');
};
}
</script>
You can't, and you shouldn't.
Every other approach / alternative will only cause really bad user engagement.
That's my opinion.
Related
Without clicking/touching on anywhere inside page when click browser back button, navigation should be disable.
Below implementation only work when click inside page.
history.pushState(null, null, window.location.href);
history.back();
window.onpopstate = () =>{ // not getting activate without clicking inside page
console.warn('DISABLE BROWSER NAVIGATION');
history.forward();
}
one of the best way is to open your application in a popup without controls but again depending upon your requirement this may not be applicable. Hope this helps. Something like below
function openPopup(){
var pathname = (window.location.pathname);
window.open(pathname+'openpagePopup.html','','width=800,height=450,toolbar=no, menubar=no,scrollbars=no,resizable=no,dependent,screenx=80,screeny=80,left=80,top=20,scrollbars=no');
return false;
}
The otherways are not trustworthy like you can show user an alert, but can not disable the back button, as per my knowledge. If you do the below make sure you check browser compatibility.
window.onbeforeunload = function() {
return "Write something here";
};
Update : I found there is a way to handle the page history. Incase that works, I have never tried, here is a link
JS - window.history - Delete a state
This question already has answers here:
Link to a page then execute a Javascript request
(2 answers)
Closed 6 years ago.
Why not Duplicate: Question wasn't answered in previous post.
I have a delete link, which when get clicked triggers a popup which contains a button. When I click that button, then the page (inside the popup) gets redirected to a new internal page. What I want to achieve is that the pop-up should close after 1 second after the redirection has happened. I applied the function when the button is clicked which is only available before the "Popup Redirection".
$('.page-user-cancel .btn').click(function(e) {
window.onunload = refreshParent;
setTimeout( function(){
function refreshParent() {
window.opener.location.reload();
window.close();
}
} , 1000 );
});
If I am not clear, please comment. English is not my native language.
EDIT
If that is not feasible, is it possible to trigger the function when the div on the new page (after redirection) gets loaded?
UPDATE
This isn't working:
var dival = $('.inside .alert').length;
if (dival > 0){
window.onunload = refreshParent;
function refreshParent() {
window.opener.location.reload();
window.close();
}
}
else{}
It works, only after refreshing.
Got it Worked: Had to remove the function call of refreshParent. might not be the best practice, but it is working that way.
The first part is not possible since, reloading the page doesn't keep JavaScript of the previous page running.
Second part is better. Yes, you can handle page load:
$( document ).ready(function() {
// Check your div here
});
I am writing an app that uses AngularJS and ui-router. I have a button that refreshes the page by reloading the page, and the functionality that automatically logs users out when the window or tab is closed. Now both functions work awesome (and done using traditional javascript to make things simple). See below:
<script>
// Refreshes by reloading page
function refresh() {
location.reload();
}
// Automatically logs users out when browser or tab is closed
window.onunload = function(){
localStorage.clear();
}
</script>
However, the problem is when the reload button is clicked it also logs the current user out and this is not what I want. I only want the user to be logged out when the window is closed. Is there anyway this can be done? Will reloading the route in my controller fix the problem?
Not a good solution but you can use a global flag that you can set when you are reloading the page
var refh = false;
function refresh(){
ref = true;
location.reload()
}
window.unonload = function(){
if(!refh)
localStorage.clear();
}
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Handle URL anchor change event in js
How to do awesome refreshless page changes like GitHub
In my app I'm using this very simple code to add a hashtag:
<a href='#test'> <input type='submit'></input>
I would like the page to refresh when I press the back button. For now, it only goes from www.mysite.com/#test to www.mysite.com.
I saw different questions on this topic, but I didn't find how to accomplish that.
Thank you for your help.
A simple way would be to wait for the hash change event to occur and then react to it. Whenever the # changes, the function will be called and if the hash is empty, the page is going to be reloaded.
window.addEventListener('hashchange', function() {
console.log(window.location.hash);
if('' === window.location.hash) {
console.log('reload');
//window.location.reload();
}
});
http://jsfiddle.net/kcKLE/1/
I'd suggest using a library like jQuery for the event-binding stuff, since addEventListener doesn't work in any browser. (Hello IE)
https://developer.mozilla.org/en/docs/DOM/element.addEventListener
If you need something fancier, there is also a history api around.
https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history
I just found how to accomplish that. I'm using the onhashchange functionality. Here is my code:
document.body.setAttribute("onhashchange", "update()");
function update() {
if('' === window.location.hash) {
window.location.reload();
}
};
So when I press the back button the hash disappears and the page reloads.
Thank you for the hints everybody.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Capturing result of window.onbeforeunload confirmation dialog
I want to make user confirm page navigation like that:
window.onbeforeunload = function(e) {
return "Note that any unsaved data will be lost";
};
however, I want to detect if user clicked "Stay in this page" to do something important.
So is there anyway to detect which button is clicked?
NB: I tried adding confirm in the onbeforeunload function but chrome block it.
There is no way to execute code right after the user decided to stay on the page.
You can use the onunload event to do something in case the user does not stay. If you want to send an AJAX request that's one of the few cases where async: false is appropriate.
Try like this
$(document).ready(function(){
$('body').live('click',function(){
$clicked = (this).attr("value");
alert($clicked);
});
})
Consider that your buttons value should be your message like:"Note that any unsaved data will be lost"