I am trying to put the Back Button Redirect Script function to good use. I have a plugin which plays background (user-initiated) music on my site. As long as the user clicks forward, the music streams continuously and nearly uninterrupted from page to page, without restarting. If the user clicks the back button (or refreshes), the music stops and they must manually press play to restart the stream. The author says they have no way to resolve it. I'm not giving up just yet.
My thought is, why not use JavaScript to record the browser's previous page URL, then capture the back button trigger and send the user "forward" to that URL, thus keeping the music stream intact while honoring the user's desire to go back a page?
Conceptually, being a supernoob at JavaScript, I patched this together from different sources on here and codingbeautydev...
$(window).bind("onpopstate", function (e) {
const previousPage = document.getElementById("previous-page");
previousPage.textContent = document.referrer;
window.history.pushState({ page: 1 }, "", "");
window.onpopstate = function (event) {
if (event) {
window.location.href = previousPage;
}
};
});
My first thought is there are surely some syntex errors in there at my doing and potentially much more that need be modified, but I'm hoping someone can easily touch up my rough sketch. Additionally, beyond making this work, I see the limits of this allowing only 1-page of history, and I'm curious if there's a way to nest it into a stack of a few pages to which could be visited in reverse order, all the while moving "forward". First things first though, then on to bigger and better.
Thanks guys! 😀
Mark
You cannot change the default behavior of the browsers's back or forward button unless your app uses URL hashes to navigate, but from my understanding of your question the user actually goes from say .com/paper to .com/boxes and not .com/paper#page1 to .com/paper#page2.
One possible option you could try is using the following (from here):
window.addEventListener('pageshow', function (event) {
if (event.persisted || performance.getEntriesByType("navigation")[0].type === 'back_forward') {
// User got here from using the Back or Forward button
}
});
This will trigger when the user got on the page this code runs on using the back or forward window button, also if the user goes from /boxes back to /paper.
You can try to save the current state of the music playing on the background (which song, timestamp, audio level, etc) in local storage (at max) every second or so, and get the stored values inside the function above to continue the music the user was last listening to when he left the previous page. Not the most elegant solution, but all I think of right now that might actually work.
Edit:
The code you requested. Chrome & Safari will block/ignore it due to history manipulation, except when an user interacts with the page first. It's not how history should be used. Don't use it in production, but play with it all you want. Also, here's an simple example how history can be used.
window.history.pushState({}, '', window.location.pathname);
let previousPage = document.referrer;
window.addEventListener('popstate', (e) => {
window.location.assign(previousPage)
});
I have a function named back() which will be used for ajax calls. Actually I have an array stack contains last 5 search results and that back function will switch to the previous result set (according to that array stack) and it even changes the URL using window.history.pushState() when you click on the back button.
That back button I was talking about, is an element inside the browser which revokes back() function. Now I want to revoke back() function also when user click on the back button of the browser. Something like this:
window.onhashchange = function() {
back(); // this function also changes the url
}
But sadly window.onhashchange will be revokes twice when I click on the back of the browser. Because window.onhashchange will be revoked when you change the URL using window.history.pushState().
Anyway, how can I detect what things changes the URL? Either my JS code or the back button of the browser?
You can use performance.navigation.type
At any given point, for example on document.onload, you can read the value of type and, if it's:
0 The page was accessed by following a link, a bookmark, a form submission, a script, or typing the URL in the address bar.
1 The page was accessed by clicking the Reload button or via the Location.reload() method.
2 The page was accessed by navigating into the history.
255 any other way.
Just beware that support is limited according to the compatibilty table.
However, from the looks of it, it seems the table is outdated. It says it is not supported on chrome and I just tested it and works as expected on my chrome version (67.0)
One of solution is to implement onunload event with localstorage option.
This is from my head maybe you will need correction but this is base !
var history = [];
window.onload = function(){
var handler;
if ( localStorage.getItem('history') == null ) {
// FIRST TIME
history[0] = window.location.href;
localStorage.setItem("history", JSON.stringify(history));
}
else {
handler = localStorage.getItem('history');
handler = JSON.parse(handler);
history = handler;
// Just compare now
if (history[history.length-1] == window.location.href) {
// no change
} else {
history.push(window.location.href);
}
}
}
window.onunload = function(){
localStorage.setItem('history', JSON.stringify(history));
}
Note :
Since 25 May 2011, the HTML5 specification states that calls to
window.alert(), window.confirm(), and window.prompt() methods may be
ignored during this event. See the HTML5 specification for more
details.
I want using JavaScript to see if there is history or not, I mean if the back button is available on the browser or not.
Short answer: You can't.
Technically there is an accurate way, which would be checking the property:
history.previous
However, it won't work. The problem with this is that in most browsers this is considered a security violation and usually just returns undefined.
history.length
Is a property that others have suggested...
However, the length doesn't work completely because it doesn't indicate where in the history you are. Additionally, it doesn't always start at the same number. A browser not set to have a landing page, for example, starts at 0 while another browser that uses a landing page will start at 1.
Most of the time a link is added that calls:
history.back();
or
history.go(-1);
and it's just expected that if you can't go back then clicking the link does nothing.
There is another way to check - check the referrer. The first page usually will have an empty referrer...
if (document.referrer == "") {
window.close()
} else {
history.back()
}
My code let the browser go back one page, and if that fails it loads a fallback url. It also detect hashtags changes.
When the back button wasn't available, the fallback url will be loaded after 500 ms, so the browser has time enough to load the previous page. Loading the fallback url right after window.history.go(-1); would cause the browser to use the fallback url, because the js script didn't stop yet.
function historyBackWFallback(fallbackUrl) {
fallbackUrl = fallbackUrl || '/';
var prevPage = window.location.href;
window.history.go(-1);
setTimeout(function(){
if (window.location.href == prevPage) {
window.location.href = fallbackUrl;
}
}, 500);
}
Here is how i did it.
I used the 'beforeunload' event to set a boolean. Then I set a timeout to watch if the 'beforeunload' fired.
var $window = $(window),
$trigger = $('.select_your_link'),
fallback = 'your_fallback_url';
hasHistory = false;
$window.on('beforeunload', function(){
hasHistory = true;
});
$trigger.on('click', function(){
window.history.go(-1);
setTimeout(function(){
if (!hasHistory){
window.location.href = fallback;
}
}, 200);
return false;
});
Seems to work in major browsers (tested FF, Chrome, IE11 so far).
There is a snippet I use in my projects:
function back(url) {
if (history.length > 2) {
// if history is not empty, go back:
window.History.back();
} else if (url) {
// go to specified fallback url:
window.History.replaceState(null, null, url);
} else {
// go home:
window.History.replaceState(null, null, '/');
}
}
FYI: I use History.js to manage browser history.
Why to compare history.length to number 2?
Because Chrome's startpage is counted as first item in the browser's history.
There are few possibilities of history.length and user's behaviour:
User opens new empty tab in the browser and then runs a page. history.length = 2 and we want to disable back() in this case, because user will go to empty tab.
User opens the page in new tab by clicking a link somewhere before. history.length = 1 and again we want to disable back() method.
And finally, user lands at current page after reloading few pages. history.length > 2 and now back() can be enabled.
Note: I omit case when user lands at current page after clicking link from external website without target="_blank".
Note 2: document.referrer is empty when you open website by typing its address and also when website uses ajax to load subpages, so I discontinued checking this value in the first case.
this seems to do the trick:
function goBackOrClose() {
window.history.back();
window.close();
//or if you are not interested in closing the window, do something else here
//e.g.
theBrowserCantGoBack();
}
Call history.back() and then window.close(). If the browser is able to go back in history it won't be able to get to the next statement. If it's not able to go back, it'll close the window.
However, please note that if the page has been reached by typing a url, then firefox wont allow the script to close the window.
Be careful with window.history.length because it also includes entries for window.history.forward()
So you may have maybe window.history.length with more than 1 entries, but no history back entries.
This means that nothing happens if you fire window.history.back()
You can't directly check whether the back button is usable. You can look at history.length>0, but that will hold true if there are pages ahead of the current page as well. You can only be sure that the back button is unusable when history.length===0.
If that's not good enough, about all you can do is call history.back() and, if your page is still loaded afterwards, the back button is unavailable! Of course that means if the back button is available, you've just navigated away from the page. You aren't allowed to cancel the navigation in onunload, so about all you can do to stop the back actually happening is to return something from onbeforeunload, which will result in a big annoying prompt appearing. It's not worth it.
In fact it's normally a Really Bad Idea to be doing anything with the history. History navigation is for browser chrome, not web pages. Adding “go back” links typically causes more user confusion than it's worth.
history.length is useless as it does not show if user can go back in history.
Also different browsers uses initial values 0 or 1 - it depends on browser.
The working solution is to use $(window).on('beforeunload' event, but I'm not sure that it will work if page is loaded via ajax and uses pushState to change window history.
So I've used next solution:
var currentUrl = window.location.href;
window.history.back();
setTimeout(function(){
// if location was not changed in 100 ms, then there is no history back
if(currentUrl === window.location.href){
// redirect to site root
window.location.href = '/';
}
}, 100);
Building on the answer here and here. I think, the more conclusive answer is just to check if this is a new page in a new tab.
If the history of the page is more than one, then we can go back to the page previous to the current page. If not, the tab is a newly opened tab and we need to create a new tab.
Differently, to the answers linked, we are not checking for a referrer as a new tab will still have a referrer.
if(1 < history.length) {
history.back();
}
else {
window.close();
}
This work for me using react but can work in another case; when history is in the first page (you cannot go back) window.history.state will be null, so if you want to know if you can navigate back you only need:
if (window.history.state == null) {
//you cannot go back
}
Documentation:
The History.state property returns a value representing the state at
the top of the history stack. This is a way to look at the state
without having to wait for a popstate event.
I was trying to find a solution and this is the best i could get (but works great and it's the easiest solution i've found even here).
In my case, i wanted to go back on history with an back button, but if the first page the user opened was an subpage of my app, it would go back to the main page.
The solution was, as soon the app is loaded, i just did an replace on the history state:
history.replaceState( {root: true}, '', window.location.pathname + window.location.hash)
This way, i just need to check history.state.root before go back. If true, i make an history replace instead:
if(history.state && history.state.root)
history.replaceState( {root: true}, '', '/')
else
history.back()
I came up with the following approach. It utilizes the onbeforeunload event to detect whether the browser starts leaving the page or not. If it does not in a certain timespan it'll just redirect to the fallback.
var goBack = function goBack(fallback){
var useFallback = true;
window.addEventListener("beforeunload", function(){
useFallback = false;
});
window.history.back();
setTimeout(function(){
if (useFallback){ window.location.href = fallback; }
}, 100);
}
You can call this function using goBack("fallback.example.org").
There is another near perfect solution, taken from another SO answer:
if( (1 < history.length) && document.referrer ) {
history.back();
}
else {
// If you can't go back in history, you could perhaps close the window ?
window.close();
}
Someone reported that it does not work when using target="_blank" but it seems to work for me on Chrome.
the browser has back and forward button. I come up a solution on this question. but It will affect browser forward action and cause bug with some browsers.
It works like that: If the browser open a new url, that has never opened, the history.length will be grow.
so you can change hash like
location.href = '#__transfer__' + new Date().getTime()
to get a never shown url, then history.length will get the true length.
var realHistoryLength = history.length - 1
but, It not always work well, and I don't known why ,especially the when url auto jump quickly.
I am using window.history in Angular for the FAQ on my site.
Whenever the user wants to exit the FAQ they can click the exit button (next to the back button)
My logic for this "exit" strategy is based on the entry ID and then just go back the number of states till that state.
So on enter:
enterState: { navigationId:number } = {navigationId: 1}
constructor() {
this.enterState = window.history.state
}
pretent the user navigates through the faq
And then, when the user clicks the exit button, read the current state and calculate your delta:
exitFaq() {
// when user started in faq, go back to first state, replace it with home and navigate
if (this.enterState.navigationId === 1) {
window.history.go((window.history.state.navigationId - 1) * -1)
this.router.navigateByUrl('/')
// non-angular
// const obj = {Title: 'Home', Url: '/'}
// window.history.replaceState(obj, obj.Title, obj.Url)
} else {
window.history.go(this.enterState.navigationId - window.history.state.navigationId - 1)
}
}
As you can see, I also use a fallback for when the user started in the faq, in that case the state.navigationId is 1 and we want to route back, replace the first state and show the homepage (For this I'm using the Angular router, but you can use history.replaceState as well when you handle your own routes)
For reference:
history.go
history.state
history.replaceState
Angular.router.navigateByUrl
This might help:
const prev = window.location.pathname;
window.history.back();
setTimeout(() => {
if (prev === window.location.pathname) {
// Do something else ...
}
}, 1000);
I'm using Angular, I need to check if there is history, trigger location.back(), else redirect to parent route.
Solution from https://stackoverflow.com/a/69572533/18856708 works well.
constructor(
private activatedRoute: ActivatedRoute,
private router: Router,
private location: Location,
}
...
back(): void {
if (window.history.state === null) {
this.router.navigate(['../'], { relativeTo: this.activatedRoute });
return;
}
this.location.back();
}
This is my solution:
function historyBack() {
console.log('back');
window.history.back() || window.history.go(-1);
if (!window.history.length) window.close();
var currentUrl = window.location.href;
setTimeout(function(){
// if location was not changed in 100 ms, then there is no history back
if(current === window.location.href){
console.log('History back is empty!');
}
}, 100);
}
function historyForward() {
console.log('forward');
window.history.forward() || window.history.go(+1);
var current = window.location.href;
setTimeout(function(){
// if location was not changed in 100 ms, then there is no history forward
if(current === window.location.href){
console.log('History forward is empty!');
}
}, 100);
}
The following solution will navigate back AND will tell if the navigation occurred or not:
async function goBack() {
return new Promise((resolve, reject) => {
const timer = setTimeout(() => reject('nowhere to go'), 100);
window.history.back();
const onBack = () => {
window.removeEventListener('beforeunload', onBack);
window.removeEventListener('popstate', onBack);
clearTimeout(timer);
resolve(true);
};
window.addEventListener('beforeunload', onBack);
window.addEventListener('popstate', onBack);
});
}
// usage
await goBack().catch(err => console.log('failed'));
How it works:
Try to navigate back
Add event listeners that will trigger on navigation to another website or to another page on the same site (SPA website, etc.)
If above events didn't occur in 100ms, deduce that there's nowhere to go back to
Notice that goBack() is an async function.
var fallbackUrl = "home.php";
if(history.back() === undefined)
window.location.href = fallbackUrl;
I am using a bit of PHP to achieve the result. It's a bit rusty though. But it should work.
<?php
function pref(){
return (isset($_SERVER['HTTP_REFERER'])) ? true : '';
}
?>
<html>
<body>
<input type="hidden" id="_pref" value="<?=pref()?>">
<button type="button" id="myButton">GoBack</button>
<!-- Include jquery library -->
<script>
if (!$('#_pref').val()) {
$('#myButton').hide() // or $('#myButton').remove()
}
</script>
</body>
</html>
var func = function(){ console.log("do something"); };
if(document.referrer.includes(window.location.hostname) && history.length-1 <= 1){
func();
}
else{
const currentUrl = window.location.href;
history.back();
setTimeout(function(){
currentUrl === window.location.href && func();
}, 100);
}
I found a JQuery solution that actually works
window.history.length == 1
This works on Chrome, Firefox, and Edge.
You can use the following piece of JQuery code that worked for me on the latest versions of all of the above 3 browsers if you want to hide or remove a back button on your developed web page when there is no window history.
$(window).load(function() {
if (window.history.length == 1) {
$("#back-button").remove();
}
})
Solution
'use strict';
function previousPage() {
if (window.location.pathname.split('/').filter(({ length }) => length > 0).length > 0) {
window.history.back();
}
}
Explaination
window.location.pathname will give you the current URI. For instance https://domain/question/1234/i-have-a-problem will give /question/1234/i-have-a-problem. See the documentation about window.location for more informations.
Next, the call to split() will give us all fragments of that URI. so if we take our previous URI, we will have something like ["", "question", "1234", "i-have-a-problem"]. See the documentation about String.prototype.split() for more informations.
The call to filter() is here to filter out the empty string generated by the backward slash. It will basically return only the fragment URI that have a length greater than 1 (non-empty string). So we would have something like ["question", "1234", "i-have-a-question"]. This could have been writen like so:
'use strict';
window.location.pathname.split('/').filter(function(fragment) {
return fragment.length > 0;
});
See the documentation about Array.prototype.filter() and the Destructuring assignment for more informations.
Now, if the user tries to go back while being on https://domain/, we wont trigger the if-statement, and so wont trigger the window.history.back() method so the user will stay in our website. This URL will be equivalent to [] which has a length of 0, and 0 > 0 is false. Hence, silently failing. Of course, you can log something or have another action if you want.
'use strict';
function previousPage() {
if (window.location.pathname.split('/').filter(({ length }) => length > 0).length > 0) {
window.history.back();
} else {
alert('You cannot go back any further...');
}
}
Limitations
Of course, this solution wont work if the browser do not support the History API. Check the documentation to know more about it before using this solution.
I'm not sure if this works and it is completely untested, but try this:
<script type="text/javascript">
function goBack() {
history.back();
}
if (history.length > 0) { //if there is a history...
document.getElementsByTagName('button')[].onclick="goBack()"; //assign function "goBack()" to all buttons onClick
} else {
die();
}
</script>
And somewhere in HTML:
<button value="Button1"> //These buttons have no action
<button value="Button2">
EDIT:
What you can also do is to research what browsers support the back function (I think they all do) and use the standard JavaScript browser detection object found, and described thoroughly, on this page. Then you can have 2 different pages: one for the "good browsers" compatible with the back button and one for the "bad browsers" telling them to go update their browser
Check if window.history.length is equal to 0.
I use history.pushState and it works like a charm, except for the problem that once the url was manipulated correctly if you hit "back" in chromium or firefox, the url changes, but the page is not reloaded.
To elaborate:
We start at mysite.tld
Now (after some user interaction) we use history.pushState and change the url to be mysite.tld/some/subpage. The page gets re-rendered accordingly.
Now if you hit "back", the url changes, but NOT the page!
If you refresh, the page is refreshed.
My naive (I am an absolute javascript noob) was to add an eventListener as such:
dom.window.addEventListener("popstate",
{
(event: Event) =>
{
dom.window.location.reload()
}
})
But of course that has some unpleasant sideeffects (whenever the url changes, it reloads the page. Very bad for e.g. galleries or slideshows)
The pushstate feature allows you to reflect the state of your client application in the browser history (URL, title).
This is the flow
The user changes the state of the application
The application alters the state of the history
Set data that represents the state of your application (e.g. current data displayed)
Set the URL to reflect the state of your application
The user navigates (changes the state), which triggers a popstate event
The event contains a state property that is the data you've set when pushing state
You update the view of your application according to the state
Look at this example (commented for explaination):
popstate.html
<!DOCTYPE html>
<html>
<head>
<title>Pushstate/Popstate</title>
</head>
<body>
increment
<div id="output">?</div>
<script type="text/javascript">
window.onload = function() {
let identifier = 0,
match,
query,
identifiererEl = document.getElementById("output");
// - Since all URL properties can be accessed clientside,
// the request data is extracted from the current URL.
// - This can be seen like an ID that the server may use
// to find the actual content
// - Note that history.state makes no sense in this case,
// since it is null when the script first runs.
match = /identifier=(\d+)/.exec(location.search);
// This emulates the behaviour of a server it won't make sense in
// a client side application
if (match) {
// Set the identifier with the data "from the server"
identifier = Number(match[1]) || 0;
// Make the view initially reflect the state
render(identifier);
}
function render(text) {
identifiererEl.textContent = text;
}
// Listen to user interaction to alter the data, render and
// push the state
document.querySelector("a").addEventListener("click", (e) => {
// Increment only for simplicity
identifier++;
render(identifier);
history.pushState(
{ identifier: identifier },
"",
`/popstate.html?identifier=${identifier}`
);
});
// Listen to state changes to update the view
window.addEventListener("popstate", (e) => {
// Here you'd determine the actual data to render.
// For simplicity the identifier itself is rendered.
render(e.state.identifier);
});
};
</script>
</body>
</html>
Speaking of the gallery example, the identifier could be the photo ID and render() could update the source of the image. Of course you're responsible for fetching all or the next/previous photos (either via AJAX or inlined into the page source).
I'm using a backbone router to handle a client clicking various options on a single page. Among other things, this router also behaves similarly to simple, same-page anchor tag links.
The issue that I'm having is that if a user clicks one of the options (say, "details") then scrolls away, they may want to click "details" again. If they do so, nothing happens - the app has already routed to details and won't reroute. I would just use simple links, such as Details, but there is more going on than just jumping around the page. Is there a way to force the reroute to happen?
Building off Alexey's answer, it's possible to force Backbone's History / Router to "reroute" the current URL, as if it trigger a reload.
You can actually detect if the typical call to navigate fails / returns nothing due to already being on the same url, and call loadUrl to force it in those cases.
For example, my site-wide internal link handler looks like this:
// `Backbone.history.navigate` is sufficient for all Routers and will
// trigger the correct events. The Router's internal `navigate` method
// calls this anyways.
var ret = Backbone.history.navigate(href, true);
// Typically Backbone's history/router will do nothing when trying to load the same URL.
// In some cases (links with .allow-reload), we want it to re-fire the same route.
// We can detect when Backbone.history.navigate did nothing, and force the route.
if (ret === undefined && $link.hasClass('allow-reload')) {
Backbone.history.loadUrl(href);
}
It will always return, there are no parameters to force it. I'm looking for the solution now and one that I see is silently replacing current route with new and then try to navigate to older one.
UPD: actually, you can use Backbone.history.loadUrl
If you bind the click event in your view, you can manually fire the route.
View.js
SearchView = Backbone.View.extend({
initialize: function(options){
alert("Alerts suck.");
this.router = options.router;
},
events : {
"click a.detail_link" : "showDetails"
},
showDetails : function(){
this.router.navigate("/#details", true);
}
});