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 ?

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 ?

• javascript
• html
• cordova
• iframe
• plugins

• Are you loading the same page in the iframe? I mean, is the Original code and the iframe page's code the same? – Enrique Zavaleta Commented Jul 28, 2015 at 17:45
• if you dont want to use window parent and want the iframe to be self-sufficient, then you need to include all the necessary resources (cordova, plugins, etc...) in the html loaded inside the iframe. personlly I ll just put a condition in the code and keep it dry (self==top) ? navigator.camera : parent.navigator.camera – JOBG Commented Jul 28, 2015 at 21:58
• @Mnavarro Can you green-check my answer please ? – 3pic Commented Aug 19, 2015 at 9:41

4 Answers 4

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.

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>

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>

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

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

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

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

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