prevent user from clicking browser's back button - javascript

I want to disable the browser's back button. I have tried some javascript codes to implement the same. But those codes didn't meet my requirements. It works in firefox but not working in chrome and edge. Sometimes it works all the three but randomly working and not working.
Can anybody share me the script disable the back button in all browsers without flaws like random behaviour.
Here I showed some scripts I have tried
history.pushState(null, null, window.location.href);
history.back();
window.onpopstate = () => history.forward();
history.pushState(null, null, location.href);
history.back();
history.forward();
window.onpopstate = function () { history.go(1); };

You can refer to the following code. I test the code sample in Edge, Chrome and Firefox, it works well.
Save this file as a.html for the first page:
<!DOCTYPE html>
<html>
<head>
<title>First Page</title>
<script type="text/javascript">
function preventBack() {
window.history.forward();
}
setTimeout("preventBack()", 0);
window.onunload = function () { null };
</script>
</head>
<body>
<h3>This is first page</h3>
Goto second Page
</body>
</html>
Save this file as b.html for the second page:
<!DOCTYPE html>
<html>
<head>
<title>
Blocking Back Button using javascript
</title>
</head>
<body>
<h3>This is second page</h3>
<p>
On this page, back button functionality is disabled.
</p>
</body>
</html>
Run a.html and click to navigate to b.html. Then click browser's back button on b.html, it won't navigate to a.html.

Related

Block back button in a browser like whatsapp web

I develop a single page web application, i want to block back button to prevent the music stops when an user click to it! can anyone help me please!
Ok, there is complete, commented and tested example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script>
// Add actual page to history
history.pushState(null, null, location.pathname)
// Register back button click
window.onpopstate = function (e) {
// Prevent default action on back button click
e.preventDefault()
// Add actual page to history again
history.pushState(null, null, location.pathname)
}
</script>
</head>
<body>
</body>
</html>

The Bounce on Mouse Hover and Pop Up when we Try to Close the Window

I have a question we must have seen many a time that when we are about to close the window and Just hover mouse over the cross on Browser Tab, a pop up appears asking for us to subscribe or highlighting some coupon. This Functionality is based on which feature of the browser, does it exploits some PHP code or some artificial intelligence.
It is run on client-side as everything that interact with user interface.
The example bellow shows how to do this with pure javascript (not tested with all browsers, but works well with Chrome)
<!DOCTYPE html>
<html>
<head>
<title>Page exit example</title>
<script type="text/javascript">
var showMessage = true;
window.onmouseout = function(){
if(showMessage){
showMessage = false;
document.getElementsByTagName('body')[0].innerHTML = "Dont leave yet!";
}
};
</script>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>

How to disable the back button in the browser without going back?

How to disable the back button in the browser without going back? Below is the way that i have tried.
<html>
<head>
<script>
window.onload = function(){
window.history.forward();
};
</script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
the best thing you can do is:
window.onbeforeunload = function() { return "your message here"; };
A workaround to "disable" the back button is create a page that redirects you to the page you want to show after a little time.
For example with this code for the first page:
<html>
<head>
<script type="text/javascript">
setInterval(function(){
window.location.href='secondPage.html';
},50);
</script>
</head>
<body>
</body>
</html>
If the user press the back button, the previous page will reopen the desired page.
However, remember that users will hate you for that.

How to disable right click on a hyperlink in page/popup open in Iframe using javascript/jquery?

I need to disable right click on a Anchor tag/hyperlink in page/popup open in iframe using javascript/jquery?
I have below code logic which works when I open page in iframe but not work when I open popup in Iframe by clicking on link within the Iframe page.
In below example when I right-click on Open Popup link its not allowing the right click but when I open popup by clicking Open Popup link it's not working for links in popup.
Any suggestions?
Below sample code snippet for reference -
TestPage.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<title>Test Page</title>
</head>
<body>
<iframe id="sampleIframe" src="PopupPage.html" width="400" height="150"></iframe>
<script language="javascript" type="text/javascript">
$('#sampleIframe').load(function() {
$('#sampleIframe').contents().find('a').each(function() {
$(this).on("contextmenu", function() {
return false;
});
});
});
</script>
</body>
</html>
PopupPage.html
<html>
<head>
<title>Popup Page</title>
</head>
<body>
You are on popup page.
Open Popup
<script language="javascript" type="text/javascript">
function openPopup() {
window.open("LinkPage.html", null,
"height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
}
</script>
</body>
</html>
LinkPage.html
<html>
<head>
<title>Link Page</title>
</head>
<body>
Goto Google
Goto Facebook
</body>
</html>
For this to work, you need to include your script to disable the links in the actual iFrame content.
To demonstrate, create a jsfiddle with this code (it will not let me save it to post a link)
This would be your "LinkPage.html"
HTML
Open Popup
JAVASCRIPT
function openPopup() {
window.open("http://jsfiddle.net/t45qvtap/1/show", null,
"height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
}
And you will see it working.
Just to explain further, this is the contents of the fiddle that the above code will open in an iFrame, this would be your "PopupPage.html"
HTML
This content is in an iframe
<div>
Goto Google
Goto Facebook
</div>
JAVASCRIPT
$('body').contents().find('a').each(function() {
$(this).on("contextmenu", function() {
return false;
});
});

Popup window in Javascript

In Javascript, I want to open my window.html file in a popup window. But it doesn't display any text. Just a blank page.
This is index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script language="javascript">
var newwindow;
function popit(url){
newwindow = window.open(
url, '', "status=yes, height=500; width=500; resizeable=0");
}
</script>
</head>
<body>
CLICK ME!
</body>
</html>
window.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>SAMPLE TEXT</p>
</body>
</html>
Why doesn't it display any text?
javascript:popit(window.html);
Replace with:
javascript:popit('window.html');
Your click handler code is syntactically incorrect:
CLICK ME!
Always, always have your developer console open to check for JavaScript errors! (edit — actually in this case there wouldn't have been an error; window.html would resolve to undefined probably! Still, keep the console open :-)
Also note that I used an "onclick" attribute instead of "href".
A GOOD working code with NO crashes.
Simple and what makes this code better is that you can use it in a JavaScript file separately and have it fairing to more then one file with the same popup size even though its different pages on popups.
Javascript
// Popup window code
function MyPopUp(url) {
popupWindow = window.open(
url,'popUpWindow','height=454,width=580,left=0,top=200,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
HTML
My PopUp
NOTE: You can also use this as onload in body for example <body onload="JavaScript:MyPopUp('MyDirectory/Page.html');"> and it will aslo work on onmouseover and others... though I do not advise this unless you want to piss off the clients visiting your page.

Categories