JS Disable browser back button as soon as your page is ready - javascript

I am trying to disable the browser back button via JS code and have already seen lot of answers like
How can I stop the browser back button using JavaScript?
and
Trying to disable the browser's back button
But my problem is unique, The issue is that once my page is loaded and I don't click inside the document (Anywhere on the page) my browser back button still function the way it use to.
But If I click inside the document/page, all the above scripts and code works properly.
So the I want to ask that if there is any way I can make the document(page) active somehow so that if the user click directly on back button without clicking inside the page, They should not go back.

Related

How to make a Javascript script run more than once in a page

My website has button A. When I click it a pop up div appears with yes no option. I must click yes. So I write a script so that when I click button A, the yes option is automatically clicked. It goes like this
buttonA.onclick = function(){
document.getElementById('buttonYes').click()
};
I load this into Tampermonkey. When the page loads, the code work for the first time. After that the button goes back to their original behavior. The Javascript somehome only works once when the page is newly loaded. Can someone suggest a way to make the code works all the time in the page and I don't need to reload the page for it to work.

I want to create a function like onbeforeunload for the submit of my page

In my site I have many href and button that relocate the page you are in. I thought that, since you can't modify the body of the alert created with onbeforeunload, I can make my own type but my questions are:
Can I intercept when the page is relocated inside my site without onBeforeUnload or onUnload?
Can I make a function wait until a button i pressed?
Is it possible to intercept some other changes of the browser page like if the user try to close it?
Is it possible to disable the entire page and leave only a toast be available?

LOad JS script, when user press the back button on browser

I have a js script code and I want to use only, when user press the back button on browser (load js script on the new page).
Is it possible?
You can't use the browser buttons to trigger any event on the page, so what you're trying to do doesn't seem to be possible.

Maintaining dynamic changes after web browser's back button pressed

If I had a button on the page that changes the css so all of the text will be blue, is there any way that if a user clicks a new link, then clicks the back button, the text on the page will still be blue?
I thought about caching, but I assume the browser's cached page would be pre-blue-button-press, but might there be some way to tell the browser to re-cache the page within the blue-button javascript function? Or is there any other way to get this same functionality?

IFrame Back button

I searched a lot to get rid of this problem on the internet but could not find a specific solution despite the problem being discussed in details previously.
The query is simple. My javascript dynamically adds an Iframe to the web page (which displays a feedback form). The problem is that, "after answering", now when the user clicks the back-button of the browser the iframe instead of the browser window is affected i.e. the questionnaire is displayed again. I want the browser back button to behave normally.
This behavior is really annoying and I am having real trouble fixing this.
I am using firefox.
Looking forward to the replies. Please inform me if I should give more details.
Thanks,
Your form has a submit button, which posts the page to the server. The back button will always send the user back to the form regardless of whether you use a iframe or not. The ideal way is to notify the user of a completed action, in this case thank the user for the feedback (using an alert box) and redirect the user to the home page or provide a button in the page saying "Back to Home".
Firefox and IE indeed act like you mentioned, but Chrome do not, and I'd guess other WebKit browsers would do the same.
In Chrome, clicking the Back button will land you where you want to go (the previous URL of the parent frame). i.e. Chrome to not add iframe URL changes in the back button history.
Sadly, I've found no way to force IE and FF to replicate this, so I used the AJAX post approach suggested above by Arun.
Here's my iframe source, which use jQuery to post the form, and replace the whole page with the result of that POST:
<form method="post" onsubmit="postForm(this);return false">
...
</form>
<script type="text/javascript">
function postForm(form) {
$.post(form.action, $(form).serialize(), postCompleted);
}
function postCompleted(data) {
$('html').html(data);
}
</script>
This works in all browsers; clicking the Back button will send you back to the previous URL a seen by the end user, instead of the initial form loaded dynamically in the iframe.
I encountered the same problem: I use a dynamically created iframe to show a "popup" on my page, whose SRC points to another page that has got a form and a submit button. After submitting that page, a JS callback is used to hide the iframe. As you explained, this causes a new entry to be added to the history (on IE at least).
But I found out that removing the iframe element from the DOM (instead of hiding it) results in the unwanted history entry being removed (tested on IE9)! Which is what the user would expect in that situation.
You can observe this yourself on IE9:
Open the back button menu (right-click the back button): you only have one entry for the current page
Press submit in the iframe => the back button menu shows one extra entry for the iframe
Remove the iframe from the DOM => the back button menu no longer shows that entry

Categories

Resources