iframe in a phonegap app on ios 9.3.1

2019-05-25 08:34发布

问题:

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

  1. 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>
    
  2. 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)

  3. 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

  1. tested again with the same result as 3.

回答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: