3

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 :-)

Justin Beckwith
  • 7,686
  • 1
  • 33
  • 55
  • Try using childbrowser phonegap plugin – kvc Dec 23 '11 at 21:04
  • I tried out the ChildBrowser plugin. It works well enough I guess - it would be nice if I could bind the thing inside of a div, and treat it like a normal element that responds to size, location, and style. – Justin Beckwith Dec 26 '11 at 08:10
  • Still kinda confused with what you are trying to accomplish. Care to elaborate a bit more? Look at this [fiddle](http://jsfiddle.net/monkmartinez/NNaBv/) any similarities? – Martinez Dec 31 '11 at 05:37
  • I'm trying to load the web page in it's own component, that includes the chrome and controls for the rest of the application. The ChildBrowser PhoneGap plugin was most of what I was looking for - I ended up using it to write my own that just has the browser window, and none of the controls. – Justin Beckwith Jan 01 '12 at 06:10

1 Answers1

1

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.

Justin Beckwith
  • 7,686
  • 1
  • 33
  • 55
  • i'm having the same issue as you now (wanting to have a browser view while still being able to access other buttons of the main app). I used jquery mobile and phonegap. could you specify what these modifications are to make it work in the end? – gabsen Feb 07 '13 at 01:43