iframe ?

[MATRIX_R_]

Hi,

i use contruct 2 and a iframe plugin ... to show my website on iframe via construct 2

i would like to know if it's possible to call cordova api (admob banner , interstitial etc ...) from the website that is iframed (and not directly from the cordova project)

thanks

[Chris_P_Intel]

I believe that is doable. 

The standard and safest way to do that is via the postMessage API.  ( https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage ) With Google you can find several tutorials, stack overflow questions, etc. that will help set this up.

The unsafe way is to simply have the code in the iframe  access the plugin via window.parent  (  window.parent.some_cordova_plugin.foo() ). That may work since the parent "window" is not served, and so you might be able to skip any cross-domain access problems. But I wouldn't count on it. It would not surprise me to see that working in older Android and not newer, Windows phone, but not iPhone ( just as an example).

So "postMessage" is the best way to proceed.

[MATRIX_R_]

CHRIS P. (Intel) wrote:

I believe that is doable. 

The standard and safest way to do that is via the postMessage API.  ( https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage ) With Google you can find several tutorials, stack overflow questions, etc. that will help set this up.

The unsafe way is to simply have the code in the iframe  access the plugin via window.parent  (  window.parent.some_cordova_plugin.foo() ). That may work since the parent "window" is not served, and so you might be able to skip any cross-domain access problems. But I wouldn't count on it. It would not surprise me to see that working in older Android and not newer, Windows phone, but not iPhone ( just as an example).

So "postMessage" is the best way to proceed.

Hi,

thanks for the great explaination ...

the only thing is that my app is on ios :(

[MATRIX_R_]

and i will be thankfull if you provide us an example

did search but did not understand as well

[Chris_P_Intel]

I googled "postMessage iframe tutorial" and got some good results.  Try these:

http://javascript.info/tutorial/cross-window-messaging-with-postmessage

http://robertnyman.com/html5/postMessage/postMessage.html

good luck!

[MATRIX_R_]

CHRIS P. (Intel) wrote:

I googled "postMessage iframe tutorial" and got some good results.  Try these:

http://javascript.info/tutorial/cross-window-messaging-with-postmessage

http://robertnyman.com/html5/postMessage/postMessage.html

good luck!

so the idea is that i send message (or for example javascript call of admob) from iframe to the main page (the index.html of cordova)

right ?

[Chris_P_Intel]

The sample at should be useful. http://javascript.info/tutorial/cross-window-messaging-with-postmessage

and the example in https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage is very good as well.

In the first sample, the parent window sends a message to the iframe. But you want the reverse.  It's not any harder, just make the parent window the receiver and the iframe as the sender.

In the iframe you would have something like this:

<script>
function tell_parent()
{
  window.parent.postMessage("hello");  
}
</script>

and in the parent window you'll have something like this:

<script>
 function receiveMessage(event)
{
   alert(event.data); // --event.data will be "hello"
}
 window.addEventListener("message", receiveMessage, false);
</script>

[MATRIX_R_]

ok so let's say the javascript to call admob interstitial in the main window is show();

so i put in the main window (index.html of my cordova / intel xdk project)

1

<script>

2	function receiveMessage(event)

3

{

4

show();

5

}

6	window.addEventListener("message", receiveMessage, false);

7

</script>

and on iframe

1

<script>

2	function tell_parent()

3

{

4	window.parent.postMessage("hello");

5

}

6

</script>

right ? 

[Chris_P_Intel]

Yes, that is correct.  And the tell_parent() function will have to be called by something in the iframe.