Cordova InAppBrowser - 如何禁用 URL 和导航栏? [英] Cordova InAppBrowser - How to disable URL and Navigation Bar?

问题描述

我目前正在构建一个新闻聚合应用程序，我正在使用 InAppBrowser 供人们阅读文章.现在，我的问题是:我可以删除 URL 和导航栏吗?另外，我可以更改完成"按钮文本吗?

请告诉我...

谢谢

解决方案

要删除 URL，只需将location"选项设置为no"即可.

>

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

在 Android 上，这将删除后退/前进"按钮、URL 和完成"按钮，而不仅仅是 URL，但幸运的是，有一个特殊的仅限 Android 的hideurlbar"选项仅删除 URL.

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

可以通过添加closebuttoncaption"选项来更改完成"按钮文本.
(如果使用 InAppBrowser 插件 v2.0.2 或更高版本，现在适用于 Android.)

var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'closebuttoncaption=我的按钮名称');

在 iOS 上，可以通过将工具栏"选项设置为无"来删除工具栏.

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

但是，移除工具栏意味着后退/前进"按钮和完成"按钮将不再显示.这使得退出 InAppBrowser 变得困难.

(在 Android 上退出 InAppBrowser 不是什么问题，因为如果完成"按钮未显示，系统后退按钮提供了另一种退出方法.)

如果您想保留完成"按钮，但去掉后退/前进"按钮，请将隐藏导航按钮"选项设置为是'(需要 InAppBrowser 插件 v3.0.0 或更高版本).

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

对于较旧的插件版本，您可以通过如下修改 InAppBrowser 插件的源代码来手动删除所有 InAppBrowser 中的后退/前进"按钮.

<小时>

对于iOS，打开以下文件

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

并更改以下代码行:

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

到:

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

然后使用命令行再次构建您的项目.

<小时>

对于安卓，打开以下文件

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

并删除以下代码行:

toolbar.addView(actionButtonContainer);

要同时删除 URL，也删除以下代码行:

toolbar.addView(edittext);

然后使用命令行再次构建您的项目.

<小时>

感谢 danw 和 Vishwani 提供有用的答案.在 2018 年 4 月使用 Cordova 8.0.0、Cordova iOS 4.5.4、Cordova Android 7.1.0 和 cordova-plugin-inappbrowser 3.0.0 测试

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

解决方案

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

这篇关于Cordova InAppBrowser - 如何禁用 URL 和导航栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！