Cordova InAppBrowser - How to disable URL and Navigation Bar?

Question

I am currently building a News Aggregator App and I am using InAppBrowser for people to read the articles. Now, my questions is: Can I remove the URL and Navigation Bar? Also, can I change the "Done" button text?

Please let me know...

Thanks

Answer 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

Answer 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

Answer 3

window.open('http://url/', '_blank', 'location=no,toolbar=no');

location: Set to yes or no to turn the InAppBrowser's location bar on or off.

toolbar: set to yes or no to turn the toolbar on or off for the InAppBrowser (defaults to yes). This seams to be ios only though

Find all options here

Answer 4

If you want to keep the done/close button and remove everything else, keep location=yes:

var ref = window.open('http://apache.org', '_blank', 'location=yes');

and make changes in the inappbrowser.java file:

toolbar.addView(close);
close.setText("Done");

if (getShowLocationBar()) {
main.addView(toolbar);}

Remove the editText and actionButtonContainer. Hope it helps.

Answer 5

const options: InAppBrowserOptions= {
      zoom: 'no',
      hideurlbar: 'yes', // hide the url toolbar
      hidenavigationbuttons: 'yes', // hide navigation buttons back/forward

    }
const browser = this.iab.create(url,'_self',options);

Answer 6

In case you want to remove the toolbar completely, you could temporarily set the toolbar HEIGHT variable to 0.0. You will find it on the same file as on the answer above. It is not the best solution, but it disappears.

Answer 7

Use:

var options = {
  "location": "no", 
  "toolbar": "no"
};
$cordovaInAppBrowser.open(url, target, options);