iFrames problem + Phonegap build + Android + IOS

(My app won't be public, it's for internal use in my company) The app is intended to be an offline app not a web app.

Creating a simple app works fine on my android phone (Gingerbread 2.3) However, now my intention is to add an iframe in one of the scenes.

The iframe works great on a browser but on my Android phone, when I open the scene where the iframe is, the iframe opens directly in the default browser outside of the app.

Also, even though the iframe works in a normal browser, I can see at the top (outside) of the iframe "var html =" in bold font and at the bottom (outside) of the iframe the rest of the iframe code also in bold font.

The iframe window embeds one of the scenes in the project NOT any element from the internet.

I guess this is an issue with phonegap build and not with Hype. However, is it possible to do some workaround? My app really needs an iframe working on a mobile device.

Many thanks! your software rocks!

Vic

15
Community Answers

Best Answer

Ryan Nielsen
Jul 20, 2012 03:40PM PDT

PhoneGap 1.9 incorporated the Android workaround, so now our recommendation is as follows: iOS app developers MUST use Phonegap 1.7.0 or later. Android app developers who want compatibility with all Android versions MUST use Phonegap 1.9.0 or later.

You should try adding this code to the inner HTML of your page: http://hype.desk.com/customer/portal/articles/458755-known-issue-scrollable-text-in-iframes-or-boxes-is-cut-off-in-ios-devices-and-other-mobile-devices -- it may help.

Are you using the HTML widget element to display the iframe? Are you using javascript to create the iframe within the innerhtml of another element?

If you'd like to keep this more private feel free to email us: http://goo.gl/Gx3ae

hi vic,I'm trying to get my Hype project into Eclipse using Cordoba 1.6 but all I get is just a blank screen,have tested with phonegap 1.4.3 with the same result.Would you please tell me the steps you took to run your project on Android Emulator ?thanx in advanced

Hello;Arash Hi I have the same problem when I launch the emulator with the loaded project stays all blank.does not give me any error.to build the project with PhoneGap: build me the same thing happens.thanks

Did the Phone Gap blank screen ever get figured out? I just tried emulating the app on my Android device and got the blank/black screen as well. Pages generated work wonderfully when I load in a browser.

We've just finished investigating issues with both iOS and Android Phonegap. Here is what we found.

For iOS: You MUST use Phonegap 1.7.0 or later. Phonegap 1.6.1 and earlier have bugs which prevent those versions from working with Hype documents. We have tested both Phonegap 1.7.0 and 1.8.0, and Hype documents load perfectly on iOS with both of those versions.

------------

For Android: There is a bug in Android 3.x and 4.x that breaks WebViews and prevents them from loading any URL that contains a query string (the part of the URL that follows a '?'). Hype documents rely upon query strings in a few different areas to ensure the latest version of your document is always being loaded and that the proper HYPE runtime is being used to load each document. These query strings are not needed in an environment such as Phonegap, as you can guarantee you're always running the latest document (it's bundled in your app, after all) and the runtime is always linked to the correct document (again, it's bundled in your app). Unfortunately, removing these query strings is error-prone and would need to be done every single time you exported your document.

The Android bug, which persists even in the most recent Android releases, is documented here: http://code.google.com/p/android/issues/detail?id=17535

Thankfully, one enterprising individual developed a workaround specifically for Android Phonegap 1.7.0. The workaround is documented here: https://github.com/apache/incubator-cordova-android/pull/21 and you can download an Android Phonegap 1.7.0 JAR file with that workaround applied here: http://android.googlecode.com/issues/attachment?aid=175350122000&name=cordova-1.7.0.jar&token=wr7EMnyvXAfONqOLmT8p0v2rLlQ%3A1339021999705

Please use that JAR file for all of your Android Phonegap applications that integrate Hype animations. No other Android Phonegap build will work, including the latest release, 1.8.0. I also encourage you to contact the Phonegap team and advocate they take the fix that's published at https://github.com/apache/incubator-cordova-android/pull/21. The author has already requested they integrate his fix, but it seems they've yet to do so. If others request, perhaps they'll integrate the fix into Android Phonegap 1.9.0.

------------

In summary: iOS app developers should use Phonegap 1.7.0 or later. Android app developers who want compatibility with all Android versions MUST use Phonegap 1.7.0 and MUST download the custom built Phonegap 1.7.0 JAR linked above.

PhoneGap 1.9 incorporated the Android workaround, so now our recommendation is as follows: iOS app developers MUST use Phonegap 1.7.0 or later. Android app developers who want compatibility with all Android versions MUST use Phonegap 1.9.0 or later.

Hello There,i hope this is the right place to post my problem, as i reached this article via google search.. my problem is close to the one originally posted but not exactly the same - my iframe works fine until i change the iframe src, via JS. when i change the src of the iframe, the new iframe src to-be opens in a new window (seems to be new phonegap html window because its not a browser one) instead of in the iframe..

If this is not the right place for this question please just reference me :)THANKS AHEAD!!!!!

Hi Nimrod, I suspect you'll need to whitelist the domain you're assigning to the source attribute. There are some details on PhoneGap's wiki: http://wiki.phonegap.com/w/page/51586852/iFrames%20and%20PhoneGap

"iOS app developers MUST use Phonegap 1.7.0 or later."Does this apply if I'm using Phonegap Build (via Dreamweaver)...it seems to indicate Phonegap v.2.0 but I'm still having the problem of iframe sources loading in Safari instead of the html widgets in my app.