I’m writing an HTML5 mobile application, and using PhoneGap to push it to the iPad. The application is similar to the Twitter application for iPad, in that it lists a bunch of items, lets users click on those items, and potentially loads an external link within the app. Facebook does this as well with their applications.
Writing an application that loads external content in an HTML5 application has proven to be an awful experience to this point. I can dump an IFRAME on the page, but that doesn’t support scrolling on the iPad out of the box. I’ve done some hacky things to wire up iscroll4 to the iframe, but it’s wildly inconsistent. Scripts can jump the iframe and try to break out. Security errors are thrown. You have to modify the PhoneGap source to allow external requests from the iframe. I can’t make any assumptions about meta viewport, because the source is external. The list goes on…
I can fix a lot of these things with individual hack work arounds and dark magic, but this whole time I’ve felt like there just has to be a better way. Is there a component out there that works around all this stuff? I’ve felt like a native wrapper for the browser inside of JavaScript would fix a lot of these issues, but can’t seem to find anything like it – what is everyone else using?
Note: I just discovered the browser phone-gap plugins – I’m guessing this will be a popular choice 🙂
kvc was mostly right on. The answer was to use the ChildBrowser phonegap plugin, but with a few modifications to get exactly what I needed.