2 Replies Latest reply on Aug 10, 2016 2:10 PM by dogofpavlov

    iOS PhoneGap Iframe Issues

    dogofpavlov Level 1

      Hello, I'm a PhoneGap Newbie and am having some issues using iframes.

       

      Basically about 2 months ago I created a PhoneGap app using PhoneGapBuilder. All the app does it show an iframe and load a website (https://mycloud.act.com). It worked fine on both iOS and Android. When someone clicked a link inside the iframe, it would take them to the correct page and everything was fine.

       

      Today I've picked the app back up to continue adding a few more features and noticed that app now behaves different, and I've done NOTHING to make this happen. Anytime you click a link on the page loaded inside the iframe, the link takes you OUT of the app and into Safari.

       

      I'm guessing maybe something updated or changed in PhoneGapBuilder to make this happen. I've found multiple overstack threads and even some in here both NOTHING has worked for trying to fix this.

       

       

      Inside of my config.xml i have this:

        <access origin="*"/>

        <allow-navigation href="https://mycloud.act.com" />

        <allow-intent href="http://*/*"/>

        <allow-intent href="https://*/*"/>

        <allow-intent href="tel:*"/>

        <allow-intent href="sms:*"/>

        <allow-intent href="mailto:*"/>

        <allow-intent href="geo:*"/>

        <platform name="android">

          <allow-intent href="market:*"/>

        </platform>

        <platform name="ios">

          <allow-intent href="itms:*"/>

          <allow-intent href="itms-apps:*"/>

        </platform>

       

      here is my entire index.html

      <html>

      <head>

          <meta charset="utf-8" />

          <meta name="format-detection" content="telephone=no" />

          <meta name="msapplication-tap-highlight" content="no" />

          <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />

          <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->

          <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />

          <!-- Good default declaration:

          * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication

          * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly

          * Disables use of eval() and inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:

              * Enable inline JS: add 'unsafe-inline' to default-src

              * Enable eval(): add 'unsafe-eval' to default-src

          * Create your own at http://cspisawesome.com

          -->

          <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *" /> -->

          <!-- <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" /> -->

          <script type="text/javascript" src="js/jquery.min.js"></script>

          <!-- <script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script> -->

          <link rel="stylesheet" type="text/css" href="css/index.css" />

          <title>Act Mobile</title>

      </head>

      <body>

          <div class="app">

              <script type="text/javascript" src="cordova.js"></script>

              <script type="text/javascript" src="js/index.js"></script>

              <script type="text/javascript">

                  app.initialize();

              </script>

              <iframe id="webview" src="https://mycloud.act.com"></iframe

          </div>

      </body>

      </html>