I am making a project in school where we need to make a small website on a specific topic, now I want that when the browser's back button is clicked. I come to my home page which I have included in the code provided above, Please help me!
i dont know if it is true or not , but i tried a simple code now , so when user opened our first page , current page URL will save in your session or cookie . after that in second page when user clicked back button you should save that page URL in session again . when user clicked back you have 2 URL and you can check : if these 2 URL matches it means user is in same page , but else user clicked back button . and you must check this in all your pages or in pages you want .
if ($_SESSION['link1'] === $_SESSION['link2']) {
$backClicked = false;
}else {
$backClicked = true;
header("location: Your Home Page");
}
There is no way to control the back button in a browser only using HTML and CSS. You will have to use JavaScript.
With JavaScript you could look to use history.pushState() or history.replaceState() to modify the history of the browser. Adding the homepage to the history, so that when the user clicks the back button that is where they will go.
You can read more about the History API here:
https://developer.mozilla.org/en-US/docs/Web/API/History_API#Interfaces
Related
I have a back button that is suppose to lead me users back to a page in the history. But the issue is that when you right click and open in a new tab when the user clicks on the back button it does not work.
To clarify i have a page with products and there are buttons that go to the checkout page. On that check out page there is a back button using history.back(). but after testing opening the buy button on a new tab makes the back button unusable.
I need a way to prevents this please thank you.
I don't think there is a function for that, but I see two possibilities:
document.referrer (like APAD1 suggested in the comment section):
The referrer property returns the URL of the document that loaded the current document, hence if you do document.referrer, you will only get the URL from the page where you clicked the button to load the current page.
If you want to be able to not only go to the previous page but also remember the pages loaded before the previous page, then see next option
window.localStorage and document.referrer
Since document.referrer only remembers the previous document's URL, you can use window.localStorage to store the history. You can create an array as a localStorage item and add new URLs as you go forward and remove Urls as you go back to a previous page inside the new tab
More info:
- document.referrer
- document.referrer
- Window localStorage Property
This is a single page website with navigation consisting of anchor links to different sections of the page. When the navigation is clicked URL updates to ex.(.com/#photos) and makes the browser add as a new page for each anchor link clicked. This makes the user have to click back multiple times if they wanted to get back to a previous website. I would like to have at max 2 back button presses, 1 to go to top of the page, 2 to go to previous website. I am really at a loss on where to implement this code, or if it is even ideal to mess with how the browser acts to the user. My google-fu turned up very little information on this issue.
You can attach a function to window.onpopstate event and then check if window.history.length has changed. If it has not changed, probably it is the back button press.
Like this..
var prevHistoryLength = -1;
window.onpopstate = function(e){
if (prevHistoryLength == window.history.length)
document.location = document.referrer;
prevHistoryLength = window.history.length;
}
Here is the flow of events on my web site
Go to [http://example.com]. The web page shows the content from http://example.com/foo even though the browser address bar says http://example.com
The text on the web page asks the user to check out bar. The user clicks on the link and is taken to
[http://example.com/bar]
The text on the web page asks the user to check out baz. The user clicks on the link and is taken to
[http://example.com/baz]
The text on the web page asks the user to check out qux. However, the user clicks on the browser back button and is taken to
[http://example.com/bar]
The text on the web page asks the user to check out baz. However, the user clicks on the browser back button and is taken to ... FAIL! This is where the browser bar should have become [http://example.com] but it doesn't change at all.
The code implementing all this is rather straighforward
var goTo: function(uri) {
get uri via XMLHttpRequest
swap content
history.pushState(null, null, uri);
}
window.addEventListener("popstate", function(event) {
var uri = location.pathname.replace("\/", "");
goTo(uri);
}, false);
Problem solved. See HTML 5 History - window.pushState not working for details, but the short of it is that I can't have history.pushState() inside a popstate event. Once I isolated the two, it is working great.
I have a link
click me
when a user click the link "click me", the new link page will be redirected and do something at the server side. The problem, if a user click the back button on the browser, it will go back to the old link. If the user click the link "click me", the new link page will be opened and processing at the server side will do again. How to prevent this situation? That is even a user go back to the old page, the new link cannot be clicked anymore
Generate a unique id on the link, like therequest.do?id=1234, and log 1234 to a database so that the request cannot be run again.
User goes to mypage.do, server generates id 1234 and logs to database as unprocessed.
User clicks link to therequest.do?id=1234
Server does processing, and marks id 1234 as processed.
User clicks back button.
User clicks link again.
Server checks and sees request 1234 is already processed, so generates an error message on the screen: request has already been processed.
You could try creating a new window and that would prevent end user from being able to go back however, you would need to create visited state to make the button disappear in the CSS.
click me
Other then that in pure HTML there is no way to stop a user from hitting the back button on a standard link.
You can do this with Javascript. Here's example code that shows one way to do it:
<html>
<body>
click me
<script>
var first = true;
function f() {
if ( first ) {
first = false;
window.open('http://www.google.com');
}
}
</script>
</body>
</html>
Alternatively, you could get rid of the global state variable and just disable or hide the link once it's clicked.
I am opening links on a page into an IFrame. But if the user right clicks and selects open in new window that will ruin the look I want since it will not have the parent page holding it. So is there a way to open the page as i have it working now when the user clicks on the link but if they choose to open in new tab to have it load the current page all over again in the new window with the link they selected loaded into the IFrame.
Thankyou
You can change all the links to use javascript instead of direct HREFs. This will mean users can't actually 'open in new tab' but will have to click them like normal. Use an 'empty' href & an onclick event to set your iframe's location property.
Link
Should work
Try dropping the following code into the pages you're trying to open within the frameset:
if (top.location.href == self.location.href) {
top.location.href = '/path/to/frameset/page.aspx?somethingindicatingwhichpagetoloadiniframe';
}
This will determine if a parent frame is present and if not, redirect to the frameset page in which you should preload the original page in the iframe.