How to disable back,forward and Refresh functionality in browser? - javascript

Can anyone help me to disable browser back,forward, back button and right click menu functionality using JavaScript or JQuery? I have tried disabling the back button like this:
function disableBackButton() {
window.history.forward();
}
setTimeout("disableBackButton()", 0);
I have called this function in the Body onload event. I have a doubt that where we need to put this code in the Calling page or Called Page.Suppose i have two pages like this FirstPage.aspx and SecondPage.aspx. When I navigate from the First Page to Second Page when I click back button of the browser it should not go to FirstPage.aspx.

Have a look at A Thorough Examination of "Disabling the Back Button."

Related

How to create a function that changes css when clicking go-back button in browser with JS/jQuery

Lets say I want to go to the previous page in Chrome and I click "<-". Can I add an EventListener or some kind of function that activates when I click the button.
function goBack() {
document.getElementsByTagName("body")[0].style.overflow = "auto";
}
So in the example above. I want to call goBack() function when user goes to previous page that changes body overflow to auto.
When I searched how to solve this problem I only found instances on how to move back using history.back().
Yes, this is possible. You could actually do this in either jQuery or plain JavaScript, based on your preference.
Here is how you would do it in jQuery:
$(window).unload(goBack);
Alternatively, here is javascript:
window.onbeforeunload = goBack;
That should do it!

How to prevent user to go back with right click on back button?

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); };

How to run a script when clicking on a link?

So, I have a javascript for a popunder ad, (yeah I know they're annoying but it's not an ad, it's a page that opens behind the main page) anyway, because the script has the page open automatically when you go to my page, pop up blockers automatically block it, so what I would like to do is have the script run when someone clicks a link on my page, therefore it is user initiated and not automatically, so it doesn't get blocked by a popup blocker.. basically, so when someone clicks on one of the links on my page, it opens the link, but also opens the pop under behind my page.. I'm kind of new to javascript, but any help is appreciated!
This would be one approach:
HTML:
<a id="link">Link</a>
JavaScript:
function script() {
alert("I'm the ad");
};
document.getElementById('link').onclick = function () {
script();
};
For demonstration see this Fiddle.
/Edit: Sure, here is the JavaScript:
// copy and paste the script from the website
document.getElementById('open').onclick = function () {
load_pop_power();
};
If you don't want to show the ad when the user visits the site, you could however delete half of the code.
You could do something like this
function doSomething() {
//do your actions here
window.location="http://www.gotothelink.com";
}
</script>
click me
When the user clicks the link, the javascript code in the "onlick" attribute is executed. "window.open" opens a new window and "return true" has the effekt that the normal behaviour of the link keeps working.
tiscover
So you need to bind the popunder to a click event on a link
see http://www.pagecolumn.com/javascript/bind_event_in_js_object.htm

Popstate with Hashtags?

I have a site that uses AJAX to dynamically load content into a div.
The links to do so are anchors with href="#" and an onclick event to trigger the AJAX.
This leaves me without a history when I click back, so if I load one page, then another and click back, it does nothing.
A basic version of the code is this:
<script type="text/javascript">
function loadXMLDoc(url)
{
<!-- Load XML Script here. -->
}
</script>
</head>
<body>
<div id="myDiv">
<!-- Target div. -->
</div>
Click Me.
Click Me.
Click Me.
</body>
What I would like to know is, can I give each link a different "#" and then use a popstate handler to call the appropriate event, so if I click link 1, 2 and then 3 and then start hitting the back button, it'll go back to 2 and then 1 etc..
I was going to use history.js and start using pushstate in the loadXML script but I think the whole manipulating history thing is a bit dirty and unreliable.
Am I thinking on the right lines or is there a better way?
Currently all my links just use "#" so that it pops back to the top of the page when loading more content but I'd like to be able to go back if possible.
Any help would be great.
Browser saves hashtags to history properly. Just add hashtag #1 to this question page, hit enter, change it to #2, hit enter, change it to #3, hit enter. Now click back button, and you'll see hash changes from #3 to #2. I recommend to change only hash itself on link click and react on page hash change and page load events.
function react() {
var hash = window.location.hash.replace("#", "");
loadXMLDoc(hash + ".txt");
};
document.body.onload = function() {
react();
window.onhashchange = react;
};
Click me
Click me
Click me
Please note that onhashchange event does not supported by old IE. The only way to deal with it if you want is to define timer with setInterval and check hashes equality.
Try to use combination of LocalStorage and HistoryAPI.
When you load XMLDoc store it in LocatStorage, when back is pressed - load data from storage, not from web.
A bit code above.
/* Handling history.back added */
window.onpopstate = function(event) {
yourHandleBackFunction(event.state);
};
function yourHandleBackFunction(renderTs) {
/*Check TS and load from localStorage if needed*/
};

How to handle when the x button is click on pop-up web page using Javascript?

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

Categories