CODEWITHSUNDEEP
iphoneioscordovaiframe
Troy
Troy

Reputation: 21892

How can I open an iframe in a phonegap/cordova app running on IOS?

I have a webapp that I'm using with PhoneGap/Cordova to install in iOS and Android. At one point in the app I have an iframe that loads content from a second server.

When I run the app from a browser, everything works as expected - the iframe opens in the same page and loads the content from the second site.

When I run the webapp on an iPhone simulator using Cordova, when the iframe opens, iOS switches over to Safari and puts my app in the background.

Steps taken:

  1. I added the second site to the "ExternalHosts" array in the Cordova.plist file.
  2. I created a config.xml file next to the index.html file in the /www directory, according to the PhoneGap/Cordova documentation (https://build.phonegap.com/docs/config-xml).
  3. I added a <preference name="stay-in-webview" value="true" /> tag to the config.xml file as a child of the main <widget> tag.

My suspicion is that it is not reading/using the config.xml file, but there could be something else... Does anyone have any ideas what I might be doing wrong?

Upvotes: 13

Views: 34160

Answers (3)

eyal_katz
eyal_katz

Reputation: 1131

The same thing now with iOS 8 is not working. I get the iFrame with no scrolling and overflowing on other divs. Tried various css styles but no solution. Works fine on Android apps. This is using the latest Phonegap build.

Upvotes: 0

Troy
Troy

Reputation: 21892

After adding an InAppBrowser in place of the iframe I was using before, I eventually tried an iframe again, and the iframe now works without jumping over to the phone's browser, as it was doing before, and the iframe works consistently in both iOS and Android.

2 things changed from the time that iframes were broken to when they started working:

  1. I upgraded to Cordova 2.5

  2. I started dynamically creating/adding the iframe to the page using jquery, rather than just unhiding an already-existing iframe, as I was doing initially:

    $('<iframe src="whatever.com" height="100%" width="100%" frameborder="0"></iframe>').appendTo('body'); .

I didn't bother checking whether it was #1 or #2 that fixed the iframe issue (I'm guessing it's #1), but I thought I would post that it IS possible to get iframes working with a PhoneGap/Cordova app, in case someone else runs into the same problem.

Upvotes: 19

Nishanth Nair
Nishanth Nair

Reputation: 2965

Why dont you use the InAppBrowser? http://docs.phonegap.com/en/2.3.0/cordova_inappbrowser_inappbrowser.md.html . It is going to be tricky to use iframes which works both in Android as well as in iOS

Upvotes: 5

Related Questions