Using PhoneGap API from HTML page in iframe

2,459 views
Skip to first unread message

Roel

unread,
Nov 2, 2011, 8:56:32 AM11/2/11
to phonegap
In my index.html I defined an iframe with a page from another,
external, source. In this page the same phonegap-1.1.0.js file is
included.
I made the required changes to enable loading the remote HTML page in
the Phonegap app. And that works well. In the simulator, I see the
contents from index.html, as well as the other page (application) in
the iframe. I can click on the buttons there and it works like in
Safari/Chrome/whatever. But now I would like to use the phonegap
javascript API's in that external application, for instance access
Contacts - but lets just start with getting the Device properties.
In the external page, I defined an "onBodyLoad" function that calls a
document.addEventListener("deviceready", onDeviceReady, false);
But any reference to device.name results in an error. It seems the
"deviceready" event is never fired.
Is it possible what I would like to achieve, and what am I doing
wrong?

Environment:
PhoneGap 1.1.0
XCode 4.2
IOS Simulator 5.0
(the external application is created with Oracle Application Express
i.c.w. jQuery Mobile)

TIA.
Roel

dpachla46

unread,
Nov 4, 2011, 10:44:19 AM11/4/11
to phonegap
It seems that right now this is not possible. I just tried doing the
exact same thing as you, on Android 3.1, and it resulted in the same
outcome, deviceready is never fired and device.name throws an error.
My understanding is that the iframe doesn't really communicate with or
have access to the backing phonegap native code. The only solution
I've seen if you want to have access to the phonegap api is to make
use of postMessage to communicate between the iframe and the parent
page. If there is a way to have the iframe have direct access to the
phonegap api, I'd be very interested.

dpachla46

unread,
Nov 8, 2011, 9:56:30 AM11/8/11
to phonegap
I used these as my reference, http://davidwalsh.name/window-postmessage
and http://davidwalsh.name/window-iframe.

So it works in a "regular" browser means in Chrome/Safari, but not in
the UIWebView in iOS?

Looking at what you're trying to do though, it seems that
"parent.frames[0].content" is the culprit. Try
"parent.postMessage()". The point is that you shouldn't have to know
anything about the parent.



>I've tried using the postMessage approach, by adding this code in the
>index.html (and a receiveMessage function that just logs some text in
>the console.
>
> window.addEventListener("message", receiveMessage, false);
>
>I know this piece of code is executed, because it is wrapped in log
>messages as well.
>
>From within the iframe I fire:
>
>parent.frames[0].content.postMessage('This is IFRAME calling','*');
>
>But no reaction from index.html whatsoever....
>
>It all works in a regular browser.
>Any ideas? Example code?

Roel

unread,
Nov 8, 2011, 11:11:17 AM11/8/11
to phonegap
Indeed, parent.postMessage does work!
This way I can communicate from my HTML5-application in an iFrame to
the Phonegap framework (and back).
Thanks a lot!


On Nov 8, 3:56 pm, dpachla46 <dpachl...@gmail.com> wrote:
> I used these as my reference,http://davidwalsh.name/window-postmessage
> andhttp://davidwalsh.name/window-iframe.
Reply all
Reply to author
Forward
0 new messages