Is it possible in mobile safari to get notified when the user clicks on refresh button. I want to prevent users from accidentally leaving the page as they might have some unsaved data on the page.
I have a code that shows a prompt in safari desktop but for touch safari it just does not show anything and refreshes the page.
The code you did is something like this?
$(window).bind('beforeunload', function() {
return "You have unsaved stuff";
});
It seems it doesn't work in mobile Safari
See this possible duplicate: Is there an alternative method to use onbeforeunload in mobile safari?
Related
This web App(reactjs) works fine on desktop and tablets.
However, when trying it on mobile browser(like Safari), the progress bar keeps flickering and refreshing like:
Please click to view the gif
I have tried on Safari and Chrome(e.g. iOS12-14 & Android 10-12), all display the same result.
Anyone know why this happened?
Or why the progress bar keeps flickering and refreshing on mobile browsers, but works well on desktop?
Seems like there is an infinity refresh did you checked useEffect / useMemo / Function Call. The only thing that i can do now, is telling you where you can possibly check in your code, but for a better understanding of your problem, should provide more info about your code or more techical information
I have a form, when my user tries to reload, I need to show the popup "If you reload the page you cannot use this form".
the page is reloaded using a button in browsers
How to prevent reload and show custom popup ?
The browsers are designed to ask for confirmation with the native popup https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
And this cannot be customized (which would require async handling)
If the latter was possible people would get stuck on porn pages and would never have the chance to leave them.
I'm working on a React web app that has an iframe component to embed another web app. The parent app has functions to open or close (unmount) the iframe component. And the parent app uses real-time data subscription and it has the behavior to automatically close the iframe when it got a specific event. So it means that the iframe can be closed anytime.
Now onto the problem, both of the apps have input type="file" to upload file. If the iframe got unmounted while I have a "file select dialog" opened from within the iframe, the dialog would still be displayed unless I click the "cancel" button. But the thing is, after closing the file dialog and click Choose File in another input type="file", the file dialog will never show up again unless I refresh the page.
For more info:
the bug won't happen if I run any of the parent or iframe app in localhost, it only happen on the deployed site
Both of the apps is from same domain but with different pathname (ex. https://hello.com/parent and https://hello.com/iframe)
I'm not sure if this is a Chromium bug because it happens in Google Chrome and MS Edge, but not in Safari and Firefox.
I have a weird problem with a browser "back" button in Firefox and Safari.
The thing is, that if I enter a website home page, then click on any link in navigation, and then press the "back" button, it throws me not on a home page, where I previously was, but on a browser's start page.
It works normally, if I navigate for example from "shop" to "about us" section and then press back,
but when scenario is like: shop -> home -> about us -> back, it throws me on a "shop", not on "home"
in Chrome, Opera, IE11, Edge it works as it should, only Safari and Firefox have such problem.
I am using Angular JS, the back-end is built on WordPress.
Any suggestions ?
Its with SPA I guess.Also, you cannot touch the back button, since it is not on DOM . However, you can check for the web browser and you can create your own button function and provide functionality like :
How to detect Safari, Chrome, IE, Firefox and Opera browser?
and then use :
function goBack() {
window.history.back();
}
I am using the offcanvas plugin from Jasny Bootstrap to implement a menu. It works as expected on a desktop browser. However, on mobile (iPhone 6 to be exact) the menu does not dismiss if the user clicks outside the menu. On a desktop browser, when an offcanvas menu is displayed, clicking outside the menu area dismisses the menu. Am I missing something, is this a bug, or is this expected behavior?
I reproduced this problem comparing desktop Chrome and iPhone Chrome using the supplied Jasny Bootstrap menu sample:
http://www.jasny.net/bootstrap/examples/navmenu-push/
tyipss!
Perhaps, it's a bug, though it looks like I can reproduce it only on a real iPhone6 (not in Chrome dev tools).
You can hide the menu explicitly in its callback function, like here:
$('.your-menu-selector').on('shown.bs.offcanvas', function() {
$('.your-backdrop-element').on('click', function() {
$('.your-menu-selector').offcanvas('hide');
});
});