I'm developing an app with Quasar, using capacitor. Inside this app, I have an Iframe.
I build the app for both android and iphone, and on the android, it works fine, as expected. On the iphone, the iframe does not load the content.
The iframe code at this moment, for testing is :
<iframe src="https://www.openstreetmap.org" style="width: 100%; height: 100%"></iframe>
I've tried adding to capacitor.config.json :
{
"appId": "com.aaa.bbb",
"appName": "The test Project",
"bundledWebRuntime": false,
"npmClient": "yarn",
"webDir": "www",
"server": {
"allowNavigation": [
"*",
"www.openstreetmap.org"
]
}
}
Also adding to config.xml:
<?xml version='1.0' encoding='utf-8'?>
<widget version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<access origin="*" />
<allow-navigation href="*" />
</widget>
It still doesn't work.
Has anyone been through this problem and can lend me a hand?
Edit 1:
Modified iframe code to :
<iframe src="https://www.openstreetmap.org"
sandbox="allow-forms, allow-modals, allow-orientation-lock, allow-pointer-lock, allow-popups, allow-popups-to-escape-sandbox, allow-presentation, allow-same-origin, allow-scripts, allow-top-navigation, allow-top-navigation-by-user-activation" style="width: 100%; height: 100%">
</iframe>
Still no luck
Edit 2:
On the Iframe, using a webpage that contains no Javascripts , the page shows.
Pages like https://www.openstreetmap.org which are heavy on javascript, don't load.
Another page that I want loading, which uses Stripe javascript, doesn't load.