Cordova/Phonegap 在 Cordova 主 web 视图中加载外部站点

Question

What i want

I have external web-resource that i want cordova webview to simple open and be able to navigate through its inner navigation.

Description

InAppBrowser docs said

The InAppBrowser window behaves like a standard web browser, and can't access Cordova APIs. For this reason, the InAppBrowser is recommended if you need to load third-party (untrusted) content, instead of loading that into the main Cordova webview

So i have an trusted external links (let's say http://www.google.com i want to load in main webview and want to control its process though window.location.href or user links click.

What i tried

Generated hello world app with latest cordova and inserted

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

to its onDeviceReady. It's config was already having (and i tried to change it to concrete adress)

<access origin="*" />

I also tried window.open and manual user link clicks, but all i've got is dialog to open link in external browser instead of rendering it inside same webview. I also tried InAppBrowser extension, that works fine when i disable navigation bar but it has communication problems and doesn't work on manual link licks and window.location.href changes.

Answer 1

Solved this issue using following rules on both ios and 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:*" />

If you stuck on same problem you also need to know following:

• Multiple cordova versions has different rules structure and behaviours when docs isn't always correct about current version. In my researches i found this article very useful https://github.com/jessemonroy650/top-phonegap-mistakes/blob/master/whitelist-matrix.md
• My main problem was "not knowing" that allow-intent overrides allow-navigation. Make sure you understand how it works

Answer 2

How to load www.example.com to Cordova WebView?

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

More information:

AFAIK by default Cordova does not allow to load external links on WebView. However you can still show internal html pages which are stored in the your project (for example index.html etc). It's a security measure.

So you need to install this plugin cordova-plugin-whitelist and manually whitelist the domains that your app wants to load on Cordova WebView.

If you want to allow all the links to load in WebView you can use <allow-navigation href="*" /> But it is not recommended.

Relevant links:

Official Github link