Comments (2)
IS there any update ?
from page.js.
What you are trying to do is not as simple as it seems. The browser's back button is a browser-level control, and, to the best of my knowledge, no major browser allows you to cancel or intercept the effects of the back button.
I have a similar requirement (although with a slightly wider scope) for a SPA that I'm working on, and it takes quite a bit of programming gymnastics to get it right — almost to the point of spaghetti code — since you're wrestling against the aforementioned limitations of the browser.
If you're only concerned about the back button, you could probably try replacing the current history state, then pushing a new one. That way, when the user moves backwards in the history, you'd be in a position to test for the first state. Something like this:
// --snip--
// the user changed the form
let state = history.state;
state.marked = true;
history.replaceState(state);
// --snip--
// define newState
history.pushState(newState, null);
// --snip--
// user presses the back button
// --snip--
// we are now in the middleware/route handler
if (history.state.marked) {
let r = confirm("You pressed a Back button! Are you sure?!");
if (r) {
let state = history.state;
delete state.marked;
history.replaceState(state);
history.back();
} else {
history.forward();
}
}
Now, of course, the code above is just a very rough estimation of the algorithm. You'd have to do your own research and figure out how best to adapt this approach to your project. But, all in all, I don't think the issue that you've described is inherently related to page.js.
from page.js.
Related Issues (20)
- 'prevContext' on hash change not set properly
- bug for omitting query and hash from pathname
- Page reload on redirect page("./pageToRedirect") HOT 1
- Doesn't work with Github Pages? HOT 1
- page.len does not decrease after click browser's back button
- Relative link when current location has #hash triggers a reload while it doesn't with no #hash or empty # HOT 3
- can't access ctx.page.preContext, ctx === ctx.page.preContext returns true
- very simple page, but got 404 HOT 1
- page('/about', about); HOT 1
- What NPM Package should I use? "page" or "page.js" HOT 1
- Page base not used for history state (breaks reloading in electron) HOT 2
- Handling onpage hash links HOT 5
- It would be nice to have a minified version available
- Change route url without refreshing HOT 1
- Whether pathname includes base depends on whether there is an anchor (#foo)
- doc link 404
- history.state is cleared on initial page load
- is this project still active? HOT 8
- Worth forking? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from page.js.