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

Corfu

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

Patellate

I tried to edit the CDVInAppBrowser.m and run 'cordova build' and then deploy on the simulator via 'cordova emulate ios --target=iPhone-6' but it seems the change in the .m file is ignored (I see 'done' and the navigation, I was expecting the back/fwd buttons to disappear). Can you be more specific? Maybe with the latest cordova 6.0.0, where plugins are installed via npm this doesn't work anymore? Would be nice if you can update the (already very good, thx for it) answer for the actual cordova version... thank you. – Minnick

Thanks, have just updated my answer above to reflect recent changes and it should now be accurate for the latest Cordova versions. Sounds like you might have edited the wrong ‘CDVInAppBrowser.m’ file. If you use the one in the ‘plugins’ folder in the root directory of a Cordova project, the changes won’t take effect. It’s the ‘CDVInAppBrowser.m’ buried way down in the ‘platforms’ folder that needs to be changed. – Patellate

How to do the same for android ? – Mcgowan

Su Android device works, but iOS emulator does not work. – Lawford

Hi, have just updated my answer above with full Android details and just completed testing with the latest Cordova versions. It's working fine for me on both iOS and Android, with real devices and simulators. – Patellate

Superb answer mainly for For older plugin versions, you can manually remove the 'Back/Forwards' buttons – Unbelt

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

Happiness

how to close window.open tab ? – Anh

Great, an example with more than one options in the call!! – Swig

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

Totaquine

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.

Ambassadress

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);

Eldredge

Code only answers can almost always be improved by the addition of some explanation of how and why they work. – Sandpiper

that is why i have added comments in my code kindly check – Eldredge

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.

Counterreply

Answer 7

Use:

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

Solitaire

This didn't work. Answer above worked : 'location=no,toolbar=no' make sure there are no spaces before and after the comma – Diego