Open link in system browser instead of in app browser – Javascript

The Problem:

Links opened through in-app browsers of social media platforms, such as Instagram or Facebook, often encounter issues with certain features of external websites. These in-app browsers have limitations and may cause compatibility problems. For example, the website might not display correctly or interact properly with the user. Users may want to bypass these in-app browsers and directly open the link in their device’s system browser, which usually provides a more reliable and seamless browsing experience.

The Solutions:

Solution 1: Use web detection libraries to detect in-app browsers and redirect to the system browser.

To open links in the system browser instead of the in-app browser, you can use a combination of web detection libraries and custom code:

1. Detect Android In-app Browsers:

   • Use a library like Bowser (https://github.com/bowser-js/bowser) to detect the browser engine and platform.

2. Detect iOS In-app Browsers:

   • Use a library like detect-inapp (https://github.com/f2etw/detect-inapp) to detect common in-app browsers on iOS.

3. Redirect to System Browser on Android:

   • Use Window.location.replace("intent://example.com#Intent;end") to open the link in the default browser on Android devices.

4. Display a Button for iOS:

   • For iOS devices where redirecting to the default browser is not possible, display a button on your website that allows users to open the link in their default browser.

5. Handle Infinite Redirection Loops:

   • Prevent infinite redirection loops by checking if the user is already in an in-app browser before redirecting.

This solution is a feasible workaround for opening links in the system browser on both Android and iOS devices. However, it is important to note that the effectiveness of this approach may vary depending on the specific in-app browsers and the strategies they use to prevent external link opening.

Video Explanation:

The following video, titled "Ionic/Angular: How to open external URL in default phone browser ...", provides additional insights and in-depth exploration related to the topics discussed in this post.

The following tutorial explains how to open external URL in default android/iOS browser -- Post on my blog: ...