CODEWITHSUNDEEP
javascripthtmlcordovaiframeplugins
Mnavarro
Mnavarro

Reputation: 151

Try use Cordova plugins in a iframe

I'm working with Cordova loading a HTML in a iframe. All work fine but I need access to the plugins in the original HTML.
The original code is like this

navigator.camera.getPicture(onSuccess, onFail);

When I load that HTML in a iframe I need make this

parent.navigator.camera.getPicture(onSuccess, onFail);

This code work but I really need don't change the original code. Somebody know how I can use cordova plugins in a iframe ?

Upvotes: 14

Views: 3580

Answers (4)

Zeni
Zeni

Reputation: 1005

You can use window.postMessage and window.onMessage for cross communication between iframe and its parent.

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onmessage

https://gist.github.com/pbojinov/8965299

https://javascript.info/cross-window-communication

Upvotes: 0

3pic
3pic

Reputation: 1219

Code in your iFrame exactly like in your main HTML, like if main HTML doesnt exist.

For the iFrame onReady fail: use rather load()

$('iframe#my_iFrame_id').load(function() {
        //code here...
    });

EDIT What is a Cordova plugin ? It is a bunch of native code (Obj-C for iOS, Java for Android, etc.), which is called by JS 'bridge' functions. Note: You can do your own plugin, btw, quite easily if you know coding native - moreover it is interesting to do cross-code JS/native.

Well, The plugin native code does care nothing about your iFrame... it executes native stuff and give you the power to input it, and get output. There is no use IN an iFrame, but FROM an iFrame. So... it is so simple... you shall code in your iFrame like you would do in the main HTML. Add JS (cordova, etc) and do the rest.

Upvotes: 4

KAUSHAL J. SATHWARA
KAUSHAL J. SATHWARA

Reputation: 994

hello try this one

<iframe src="map.html" seamless="" height="300" width="100%"></iframe>

and add cordova.js in your index.html file

<script type="text/javascript" charset="utf-8" src="cordova.js"></script>

Upvotes: 0

tnt-rox
tnt-rox

Reputation: 5548

Add the cordova.js link to the html file being loaded into your ifame.

<script type="text/javascript" charset="utf-8" src="cordova.js"></script>

Upvotes: 3

Related Questions