Cordova/Phonegap如何在主要的Cordova Webview中加载外部网站

Question

我想要什么

我有一个外部的Web资源，我希望Cordova WebView能够简单地打开它，并能够通过其内部导航进行浏览。

描述

InAppBrowser文档中提到：

InAppBrowser窗口的行为类似于标准的Web浏览器，无法访问Cordova API。因此，如果您需要加载第三方（不受信任）内容，建议使用InAppBrowser，而不是将其加载到主Cordova WebView中。

因此，我有一个受信任的外部链接（比如http://www.google.com），我想在主WebView中加载它，并希望通过window.location.href或用户链接点击来控制其过程。

我的尝试

使用最新的Cordova生成了Hello World应用程序并插入了以下内容：

window.location.href = 'http://www.google.com/'

针对onDeviceReady事件的处理。其配置已经存在（我尝试将其更改为具体地址）。

<access origin="*" />

我还尝试了window.open和手动用户链接点击，但我得到的只是打开外部浏览器的对话框，而不是在同一webview内呈现它。 我也尝试了InAppBrowser扩展，当我禁用导航栏时它可以正常工作，但它存在通信问题，在手动链接单击和window.location.href更改时无法正常工作。

- user2765683

---

你尝试过使用 window.location.assign("http://www.google.com/") 吗？ - Arpit Vasani

@ArpitVasani 尝试过了，它会像其他方法一样在系统浏览器中打开链接。 - user2765683

Answer 1

使用以下规则在iOS和Android上解决了此问题：

<access origin="*" />
<allow-navigation href="*" />
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-navigation href="tel:*" />
<allow-navigation href="sms:*" />
<allow-navigation href="mailto:*" />
<allow-navigation href="geo:*" />

如果您卡在同一个问题上，您还需要了解以下内容：

• 多个cordova版本具有不同的规则结构和行为，当文档没有关于当前版本的正确信息时。在我的研究中，我发现这篇文章非常有用：https://github.com/jessemonroy650/top-phonegap-mistakes/blob/master/whitelist-matrix.md
• 我的主要问题是“不知道”allow-intent会覆盖allow-navigation。请确保您理解它的工作原理

- user2765683

---

谢谢！对我来说特别重要的是第二个要点（allow-intent覆盖allow-navigation）。删除相应的allow-intent条目（例如http，https）。如果你想挑选出一个例子，比如一个Facebook链接在外部打开，只需添加：<allow-intent href="*://*.facebook.com/*" /> - rerezz

我在移动测试中得到了一个空白页面。 - Eddie

Answer 2

如何将www.example.com加载到Cordova WebView中？

    <allow-navigation href="https://example.com/*" />
    <allow-navigation href="*://*.example.com/*" />

更多信息：

据我所知，默认情况下，Cordova 不允许在 WebView 中加载外部链接。然而，您仍然可以显示存储在您的项目中的内部 HTML 页面（例如 index.html 等）。这是一种安全措施。

因此，您需要安装此插件 cordova-plugin-whitelist 并手动将您的应用程序想要在 Cordova WebView 上加载的域名列入白名单。

如果您想允许所有链接在 WebView 中加载，您可以使用 <allow-navigation href="*" /> 但这并不推荐。

相关链接：

官方 Github 链接

- Rohit Singh