Cordova InAppBrowser - How to disable URL and Navigation Bar?

Solution 1:

To remove the URL, just set the 'location' option to "no".

var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=no');

On Android, this removes the 'Back/Forward' buttons, URL and 'Done' button, not just the URL, but thankfully there’s a special Android-only ‘hideurlbar’ option to remove ONLY the URL.

var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', ‘hideurlbar=yes’);

The 'Done' button text can be changed by adding a 'closebuttoncaption' option.
(Now works on Android if using InAppBrowser plugin v2.0.2 or above.)

var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'closebuttoncaption=My Button Name');

On iOS, the toolbar can be removed by setting the 'toolbar' option to "no".

var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'toolbar=no');

However, removing the toolbar means both the 'Back/Forward' buttons AND the 'Done' button will no longer show. This makes it difficult to exit out of the InAppBrowser.

(Exiting the InAppBrowser is less of an issue on Android, since the system back button provides an alternative exit method if the 'Done' button is not showing.)

If you want to keep the 'Done' button, but get rid of the 'Back/Forward' buttons, set the 'hidenavigationbuttons' option to 'yes' (requires InAppBrowser plugin v3.0.0 or above).

var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'hidenavigationbuttons=yes');

For older plugin versions, you can manually remove the 'Back/Forwards' buttons in ALL of your InAppBrowsers by modifying source code for the InAppBrowser plugin as follows.

For iOS, open the following file

YOURAPPNAME/platforms/ios/YOURAPPNAME/Plugins/cordova-plugin-inappbrowser/CDVInAppBrowser.m

and change the following line of code from:

[self.toolbar setItems:@[self.closeButton, flexibleSpaceButton, self.backButton, fixedSpaceButton, self.forwardButton]];

to:

[self.toolbar setItems:@[self.closeButton, flexibleSpaceButton]];

Then build your project again using the command line.

For Android, open the following file

YOURAPPNAME/platforms/android/src/org/apache/cordova/inappbrowser/InAppBrowser.java

and remove the following line of code:

toolbar.addView(actionButtonContainer);

To also remove the URL, delete the following line of code too:

toolbar.addView(edittext);

Then build your project again using the command line.

Thanks to danw and Vishwani for helpful answers. Tested Apr 2018 with Cordova 8.0.0, Cordova iOS 4.5.4, Cordova Android 7.1.0 and cordova-plugin-inappbrowser 3.0.0

Solution 2:

In 3.1.0(?) you can hide the toolbar using the 'toolbar' option.

For example:

ref = window.open('http://some.page/foo/', '_blank', 'location=no,toolbar=no');

see: phonegap docs