Question

I'm trying to show an iframe in a phonegap app on iOS 9.3.1. For some reason (hence this question) the iframe shows up on android but not on ios.

Setup: 1. on a mac, i installed PhoneGap desktop v0.3.1 and created a new app

in index.html i added the iframe

<body>
    <iframe src="http://www.w3schools.com"  style="border-style:solid; width:750px; height:500px;"/>
    <div class="app">
        <h1>PhoneGap</h1>
        <div id="deviceready" class="blink">
             <p class="event listening">Connecting to Device</p>
             <p class="event received">Device is Ready</p>
        </div>
    </div>

    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
</body>

then tested on an iPad with the PhoneGap app (https://itunes.apple.com/us/app/phonegap-developer/id843536693?mt=8) installed: on android it works while on ios it does not show up (i can see the border, but not the content)

then changed the config.xml to be more permissive

<access origin="*" />
<allow-intent href="*" />
<allow-navigation href="*" />

<plugin name="cordova-plugin-whitelist" version="1"/>
<allow-intent href="*" />
<allow-navigation href="*" />

<platform name="android">
  <allow-intent href="*" />
</platform>
<platform name="ios">
  <allow-intent href="*" />
</platform>

and added in index.html

tested again with the same result as 3.

Answer 1

Open your Info.plist file from Resources->ProjectName-Info.plist.

Add below details: App Transport Security Settings as Dictionary and add Allow Arbitrary Loads to true.

Check underneath image:

And second thing you need to add External Hosts as a string with item 0 having * value. Check below images:

iframe in a phonegap app on ios 9.3.1

1 个答案: