InAppBrowser plugin is used to open external links from your app inside a web browser view. We can show helpful articles,
videos, and web resources inside of our app. Users can view web pages without leaving your app. The InAppBrowser window behaves like a standard web browser, and can’t access Cordova APIs.
For this reason, the InAppBrowser is recommended if you need to load third-party (untrusted) content, instead of loading that into the main Cordova web view. The InAppBrowser is not subject to the whitelist, nor is opening links in the system browser.
The InAppBrowser provides by default its own GUI controls for the user (back, forward, done).
In this example we are creating apps, we have simple checkbox and button. When page load next button is disabled, it will able or active only when a user clicked on the checkbox, which will display a web page of https:ionic.io/tos on top of our current apps window.
Screen shot of our apps:-
Step 1 ionic start inAppBrowse blank –v2
$ ionic plugin add –save cordova-plugin-inappbrowser
$ npm install –save @ionic-native/in-app-browser
Step 3: Open /config.xml in the project folder and insert the following code under
In home.html we have
the component is clicked on, it will trigger the openTOS() method, which will open the URL via InAppBrowser. The Next Button is disabled by default (via the readTOS variable). So when openTOS() method is called, it will change the value of the button to true. Which allows us to click on next button is enabled.
Step 4: Add the following code in home.html
Step 5: Add the following code in home.ts
Step 6: Add the following code in home.scss