Cordova InAppBrowser - 如何禁用 URL 和导航栏？答案

【问题标题】：Cordova InAppBrowser - How to disable URL and Navigation Bar?Cordova InAppBrowser - 如何禁用 URL 和导航栏？
【发布时间】：2013-03-13 17:08:37
【问题描述】：

我目前正在构建一个新闻聚合器应用程序，并且我正在使用 InAppBrowser 供人们阅读文章。现在，我的问题是：我可以删除 URL 和导航栏吗？另外，我可以更改“完成”按钮的文字吗？

请告诉我...

谢谢

【问题讨论】：

标签： cordova phonegap-plugins

【解决方案1】：

要删除网址，只需将“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=My Button Name');

在 iOS 上，可以通过将“toolbar”选项设置为“no”来移除工具栏。

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

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

（退出 InAppBrowser 在 Android 上不是问题，因为如果“完成”按钮未显示，系统后退按钮提供了另一种退出方法。）

如果您想保留“完成”按钮，但去掉“后退/前进”按钮，请将“隐藏导航按钮”选项设置为“yes'（需要 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]];

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

对于 Android，打开以下文件

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 测试

【讨论】：

我尝试编辑 CDVInAppBrowser.m 并运行“cordova build”，然后通过“cordova emulate ios --target=iPhone-6”在模拟器上部署，但似乎 .m 中的变化文件被忽略（我看到“完成”和导航，我期待后退/前进按钮消失）。你可以说得更详细点吗？也许使用最新的cordova 6.0.0，通过npm安装插件这不再起作用了？如果您可以更新实际科尔多瓦版本的（已经非常好的，谢谢）答案会很好......谢谢。
谢谢，刚刚更新了我上面的答案以反映最近的变化，现在对于最新的 Cordova 版本应该是准确的。听起来您可能编辑了错误的“CDVInAppBrowser.m”文件。如果您使用 Cordova 项目根目录下的“plugins”文件夹中的那个，更改将不会生效。需要更改的是隐藏在“平台”文件夹中的“CDVInAppBrowser.m”。
如何为 android 做同样的事情？
苏安卓设备可以，但是iOS模拟器不行。
嗨，我刚刚用完整的 Android 详细信息更新了我上面的答案，并且刚刚使用最新的 Cordova 版本完成了测试。它对我来说在 iOS 和 Android 上都运行良好，带有真实的设备和模拟器。

【解决方案2】：

在 3.1.0(?) 中，您可以使用“工具栏”选项隐藏工具栏。

例如：

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

见：phonegap docs

【讨论】：

如何关闭window.open标签？
太好了，一个在通话中有多个选项的例子！！

【解决方案3】：

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

位置：设置为是或否以打开或关闭 InAppBrowser 的位置栏。

工具栏：设置为是或否以打开或关闭 InAppBrowser 的工具栏（默认为是）。这似乎是 ios only 虽然

找到所有选项here

【讨论】：

【解决方案4】：

如果您想保留完成/关闭按钮并删除其他所有内容，请保留 location=yes：

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

并在 inappbrowser.java 文件中进行更改：

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

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

移除editText 和actionButtonContainer。希望对您有所帮助。

【讨论】：

【解决方案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);

【讨论】：

只有代码的答案几乎总是可以通过添加一些关于它们的工作原理和原因的解释来改进。
这就是为什么我在我的代码中添加了 cmets 请检查

【解决方案6】：

如果您想完全删除工具栏，您可以暂时将工具栏 HEIGHT 变量设置为 0.0。您将在与上述答案相同的文件中找到它。这不是最好的解决方案，但它会消失。

【讨论】：

【解决方案7】：

用途：

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

【讨论】：

这不起作用。上面的答案有效：'location=no,toolbar=no' 确保逗号前后没有空格