In my site, list page loads all data in table rows. It keeps loading when user scrolls to the bottom of page(infinite scroll). This works fine. User can click a link from row and lands on another page on subdomain. When user clicks back button to list page, it fires scroll event and loads data. Sometime scroll event fired few time(say 3 to 5 api calls happens)
Site is built with Vuejs. I have tried few suggestion like window.onpopstate, vuejs' navigation guards. window.onpopstate doesn't work. Vuejs' beforeRouteEnter not helping. Because even before a flag is captured in beforeRouteEnter, scroll event fires.
Is there any way to stop scroll event being fired by back button click?
This is possibly what you are looking for:
if ( 'scrollRestoration' in history ) {
history.scrollRestoration = 'manual';
}
Related
when back or forward buttons are clicked, react doesn't trigger componentWillUnmount() life cycle method. I already found this same issue when page refreshes, but what I need to do is to identify event relevant to browser back or forward button clicks. For the page refresh issue, it uses window.onbeforeunload event to trigger the relevant cleanUp functionality when document is going to be unloaded. But I want to trigger the necessary functionality when back or forward buttons are clicked and not during page refresh. Therefore, how can I approach this issue ?
What I am trying to do?
I want to remember the current position of the user on the page, so once s/he navigates to another page and then comes back using the browser "Back" button to scroll to that position. Please note that I need to maintain this behaviour only when the user clicks on the browser back button.
How I am trying to achieve it?
When the user clicks on an href I was using a method to replace the state. The page was then re-directed to the right place.
window.history.replaceState({ scrollToProduct: true, productCode: 'produt-XXXX' }, document.title, `${window.location.href}?product-code=produt-XXXX`);
I was then trying to register popstate listener in my App.vue
beforeMount() {
window.onpopstate = function(e) {
console.log(e);
};
}
Where my issue is?
Unfortunatelly the popstate listener doesn't get attached, so I can't capture the click of the "Back" button.
I've also tried using router.push.
this.$router.push({ name: 'NameOfComponent' });
What is interesting is that I get navigated to the other page (without page reload), and when I click on the back buttton the popstate does work. I am unfortunatelly not able to pass anything into the hisotry state.
Can someone help with this?
PS: I am not using SPA, but rather refresh on each page.
You can't use vue-router if you don't register it correctly or if you don't use Vue as an SPA.
What you need is history.back() or history.go(-1).
https://developer.mozilla.org/en-US/docs/Web/API/History/back
I have a Backbone app, it uses Backbone.history.start({pushState: true}). I render pages based on URL change, back and forward buttons work just fine, views are rendered well.
There is a problem though, page scroll positions are't kept when you click back or forward button. It makes it feel very bad.
I thought I would keep an array of pages visited and I would store scroll position for each of them. Then I would listen if user click back/forward and I would load appropriate scroll position.
But.
I just found out I am unable to tell when user click a back or forward button. If I could, I would just read stored scroll position of previous page and apply it. What am I doing wrong?
You could store the scroll location as a part of the route, using something like:
router.navigate('/my/route/scroll/[my_scroll_location]', {replace: true});
so It won't add a new history point, but will modify the current one. this way, when you hit "back" it will go to the previous "page"/route, and then hitting "forward" have enough information to scroll to the right point.
I have two different pages with a clickable element
located on the same position. On the first page there is
a menu button which will open up if a user clicks on it and
on the second one, in the exact same position there is a back
button which will redirect the user to the first page.
Now to the problem; whenever a user clicks the back
button on the second page he will be redirected to the
first page which is intended, but it will also open
up the menu automatically which it shouldn't do.
I am building an app with PhoneGap where i am utilizing
the fastclick library in order to eliminate the 300ms click
delay. If the fastclick library isn't used, the
application works as expected but then it wont feel as responsive.
The fastclick library works perfectly under iOS environment.
What could be causing this undesirable effect?
I think the problem is more because the click on loaded on a mouse event and not a touch event that you are experiencing this issue. Can you try loading the event handler on a touch event instead ?
I am checking out this link : http://www.businessinsider.com/the-worlds-weirdest-etfs-that-you-can-trade-today-2011-10#market-vectors-gaming-etf-nyse-bjk-1
The page is a slideshow where the user can either press the Next/Previous button or use the right/left arrow keys to navigate through the slideshow. Everytime the user does a navigation, the ad unit on the right sidebar does a refresh. Any idea how this can be effected?
The advertisement is displayed in an iframe (so it is not a simple div, in which case you would have to reload content using Ajax).
In the event handler for the navigation buttons, you simply have to reload this iframe.
You can either do this by using location.reload():
document.getElementById('myiframe').reload(true);
/*"true" means the URL should not be reloaded from cache*/
or setting the src to its current value:
var myIframe=document.getElementById('myiframe');
myIframe.src=myIframe.src;