Overlay windows does not close using back button on mobile browsers - javascript

I found something weird. Desktop and mobile browsers do not work the same way regarding back button.
I have hamburger menu overlay, when I click it, it opens (absolute position DIV). When I click on the link inside this overlay, on desktop, it goes to the new page. Back button then brings the previous page back, WITHOUT the overlay. This is my expected behavior.
But as I've seen, on mobile (at least on Chrome, but I think on others also), when I have overlay open and click on a link, I get to the new page, but with back I get to the previous page with the overlay STILL OPEN. It would be kind of ok, IF clicking back again would close the overlay, but it doesn't. It goes to the page I was before clicking hamburger menu or exit site, if that was my first thing I did...
Now I can handle this in 2 ways:
I can close the overlay when clicking on a link inside the menu. When I did that, overlay closes and I get to the next page. Back gets me back to the previous page without overlay. So far so good, BUT... on desktop, when I click and get on a new page this way, I have to click back 2 times to come to previous page. So that is not good.
I can somehow make the back button to close the overlay first and the next back would go back one page, but that seems even more dirty than the first option handling the push states etc.
As I see many sites have solved this. On mobile, clicking on link inside hamburger menu (or some other "popup" with menus) gets to a new page and clicking back goes back to the previous page with hamburger closed. Same behavior is on desktop, no need for double back click.
Does anybody know how I should manage this and if anybody knows why mobile browsers do not close the overlay in the first place when clicking inside it or is there some easy setting that I could trigger this behavior?
Yours
Jerry

This sounds like you just discovered a browser feature called "bfcache". I have experienced similar issues once and it took me hours to figure out whats going on.
The implementation is inconsistent through out browsers (as well as their mobile & desktop versions) and background requests the page made. It requires a certain amount of page optimization if a consistent history back/forward behavior is needed. I'm not 100% sure if that's the problem here as you missing a minimal reproducible example, but you might want to investigate in that direction.
One of the best guides on how to handle back/forward caching is this one from Google Developers.
Back/forward cache (or bfcache) is a browser optimization that enables instant back and forward navigation. It significantly improves the browsing experience for users—especially those with slower networks or devices.
As web developers, it's critical to understand how to optimize your pages for bfcache across all browsers, so your users can reap the benefits.
The "cache" used by bfcache is different from the HTTP cache (which is also useful in speeding up repeat navigations). The bfcache is a snapshot of the entire page in memory (including the JavaScript heap), whereas the HTTP cache contains only the responses for previously made requests.
  – web.dev

Related

Back button override: onpopstate and pushState trick only works when content is clicked

I'm using pushState to have adaptative URLs on a single-page web app. I'm also using onpopstate to have native-like behaviour with mobile devices' back button. I have managed not to lock the user out of their history, which is everyone's main concern on the threads I read mentioning how to do it.
It seems however that the trick I'm using only works when the window is clicked. Even scrolling doesn't work. It's a problem because users might not necessarily click and still hit the back button to close a menu. I've only tried it in Chrome with the following code :
window.onload = function(){
history.pushState({}, '', '')
}
window.onpopstate = function(){
history.pushState({}, '', '')
}
You have to open a new tab, browse to the file and hit the back button. If you don't click the content of the page before, it should walk back in history instead of being locked by the script. I've tried to use .focus and .click with no success.
Any ideas?
EDIT
This is what this person is talking about, and they definitely phrased it better than I did
The popstate solution works for my PWA, however I just want to point out that, from my experience, Chrome WILL close the PWA if it doesn't detect ANY user interaction, before the click on Android's back button (the interaction can be a link click, zoom-in, scroll ...). I was testing this code snippet on a minimal sample app, and couldn't understand why it wasn't working. I assume it is a safety measure against spam pop-ups, but hadn't read anything about it in the guides fetched by Google.
Seems like PWA aren't quite there yet.

periodically reload tab and bring to front

I have a requirement where a few users are required to keep a watch over a dashboard browser page.
My first thought was use some javascript magic that reloads the page, switches to it if it is not active and being the browser window to front. I quickly realized how difficult this (accept for reload) is and that browsers do everything possible to prevent it, with good reason.
On the other hand, I have err, seen some "websites" which show a pop-up telling me that my browser is affected and I need to call the given 800 number. These pop-ups are pretty much impossible to kill. I could use that if I knew how.
I have also considered utilities like ergociser which sit in the taskbar and open a browser window periodically. This could work but it opens a new pop-up window every time, while I am keen to reload it in the same window.
The closest I have come so far is to use alert which does not bring the window to front but it does flash the taskbar.
I am thinking of a chrome extension or firefox add-on that brings named pop-up tab. But I am open to any other ideas. It can be a browser specific solution, and it is ok to require white-listing in pop-up blockers
What is a best way to do this?
UPDATE
There are two close votes for "Too Broad". It is true that I am looking for the right technology to use for this problem, so I cannot refine it with technology-specific details. But short of that, appreciate if someone can give suggestion for narrowing down the problem statement.

From website to app to website on iOS

I'm working on an iOS app some people want to link to from their website.
While I've managed to open my app from a webpage using schemes, I wonder if, when I'm done with what I have to do in my app, I can switch back to the original website tab in safari.
To my knowledge : it is pretty straightforward to open a new page in safari from my app but I don't know if it is possible to get back to the actual original page, just like the ios9 back-to-app button would do.
I could open a new page and close it straight away with some javascript, which would probably display the original page because it's the next one in the tab list... but it doesn't feel right (does it?)
I read stuff about ios9 deep linking, still can't find anything interesting.
To achieve this is to open Safari using URLScheme. However, (afaik) Safari App doesn't have a url scheme. If the user came to your app from Chrome, than you can use its url scheme
Google Chrome has the following two URI schemes: googlechrome:// and googlechromes://
iOS 9's back to app button can't be invoked programmatically, so you can't use it as well. However in jailbreaked devices an app can mimic that, maybe that will help you http://theunlockr.com/2015/08/23/enable-back-button-ios-8-video/
I could open a new page and close it straight away with some
javascript, which would probably display the original page because
it's the next one in the tab list... but it doesn't feel right (does
it?)
It doesn't feel right at all. Because the typical behaviour for turning back to previos (or any other) application among iOS users is pressing home button twice, and selecting the app. Maybe you can simply show a message, and ask user to return Safari.

back button issue in chrome

I am facing issue with the way back button works in Chrome.
I have a application where I am displaying a form in iframe inside the parents window.
So when the user clicks on back button the behavior on IE and Mozilla is that page in iFrame loads up again.
This iFrame page refresh when the user clicks browser back button is important in my case is because we need to keep a track of users who have logged in the application and accessed that iFrame content.
Now in Chrome the behavior of back button is different. When the user clicks on browser back button the user is taken back to previous page.
I need to alter this behavior for chrome and need to refresh the content in iFrame instead of moving back to previous page.
Anyone kindly who have idea on this help me out.
PS: I cant use jQuery in application.
Regards,
Well the short answer is you can't and you shouldn't. becoz this behavior is inconsistent across different browsers and even future versions of mozilla and ie may also change it's behavior.
Still you have some alternatives to achieve this kind of behavior.
You can use HTML5's history.pushState where on hashchange event you can refresh you frame whenever you want.

Button Back in Browser with Frames (history forward don't work)

I have jsp aplication.
I want, that button Back don't work.
history.forward - not suitable, that transitions occur in frame.
In Google chrome when I go in my jsp aplication create history transitions in frame, and button Back becomes active. I need disable button Back or when button back is pressed - nothing happened. Open new windows without toolbar - ot suitable.
history.forward - good work if simple internet page.
In jsp project with frames hi does not behave predictably.
I need, than it wark in google chrome and IE (maby can write individually to each his own)
How do it?
You can't disable the browser's back button. The best you can do is write your application so that using the back burron doesn't break anything.
Try this code
<body onload="onLoad();" onpageshow="if (event.persisted) onLoad();">
because Firefox 1.5 uses in-memory caching for entire Web pages, including their JavaScript states, for a single browser session. Going backward and forward between visited pages requires no page loading and the JavaScript states are preserved.
Click here for your reference

Categories

Resources