Creating a versatile and stable popup window in a web app is a difficult task because browsers and OS's behave differently. After some research and trial-and-error, I have found that the method below makes is possible to be compatible on all browsers in any OS environments (Windows, Android, macOS and iOS).
The biggest hurdle was the Safari browser in iOS and macOS. In iOS, you have to enable Popup in iOS settings. In macOS, you have to enable Popups in the browser settings. In addition to those issues, Safari browser in macOS blocks any popups in the asynchronous calls (e.g. any ajax calls). Therefore you must include all possible scenarios when building a stable popup window in JavaScript. I have separated the article in two sections on each topic - mobile and non-mobile scenario - for your easier digestion.
1. Open
A. Non-Mobile - Windows and macOS (EXCLUDING Safari browser)
B. Non-Mobile - macOS - Safari browser - MUST ENABLE POPUP IN BROWSER SETTINGS
Immediately open a blank popup window when a button or function call happens. Then store the window to a variable to use it during the async call. If you do not assign "height" and "width" in the option, it will automatically open a new tab.
After async call, you can change the window option in the callback function (example below).
C. Mobile (if iOS, you must enable popup in the iOS settings)
The process is the same as OPTION A above, but it will always open a new tab.
2. Close
A. Non-Mobile
Non-mobile browsers has a concept of "window", so just use window.close()
B. Mobile (iOS, Android)
Mobile browsers do not have a concept of "window". They are tab-based, so use self.close()
3. Interact with Parent Window
In order to interact with the parent window, both parent and child windows must have the same domain (browser security). Store the parent window to a variable in the child window.
A. Non-Mobile
B. Mobile
As you see the examples above, the parent window is now stored as a variable in the child window. Then you can call anything in the parent window (example below).
#. CODE - HOW TO DETECT BROWSERS AND OS
The two sets of code below will help you detect mobile or non-mobile AND Safari or non-Safari browsers.
A. Detect Mobile / Non-Mobile OS
Comentarios