javascript - How to navigate from HTML page to native screen using phonegap? -
i have made hello world test app android , ios using phonegap framework.
i want invoke native screens html page.
how can invoke native screen html page?
and vice versa.
you can't open native screen directly.if want use native api of devices means if want open native screen there several apis available in phonegap.using apis can implement native functionalities application html,css , javascript.
here link apis: phonegap api
this 1 sample code.this open device's photo gallery , shows chosen image in html page.
<!doctype html> <html> <head> <title>capture photo</title> <script type="text/javascript" charset="utf-8" src="cordova-x.x.x.js"></script> <script type="text/javascript" charset="utf-8"> var picturesource; // picture source var destinationtype; // sets format of returned value // wait cordova connect device // document.addeventlistener("deviceready",ondeviceready,false); // cordova ready used! // function ondeviceready() { picturesource=navigator.camera.picturesourcetype; destinationtype=navigator.camera.destinationtype; } // called when photo retrieved // function onphotodatasuccess(imagedata) { // uncomment view base64 encoded image data // console.log(imagedata); // image handle // var smallimage = document.getelementbyid('smallimage'); // unhide image elements // smallimage.style.display = 'block'; // show captured photo // inline css rules used resize image // smallimage.src = "data:image/jpeg;base64," + imagedata; } // called when photo retrieved // function onphotourisuccess(imageuri) { // uncomment view image file uri // console.log(imageuri); // image handle // var largeimage = document.getelementbyid('largeimage'); // unhide image elements // largeimage.style.display = 'block'; // show captured photo // inline css rules used resize image // largeimage.src = imageuri; } // button call function // function capturephoto() { // take picture using device camera , retrieve image base64-encoded string navigator.camera.getpicture(onphotodatasuccess, onfail, { quality: 50, destinationtype: destinationtype.data_url }); } // button call function // function capturephotoedit() { // take picture using device camera, allow edit, , retrieve image base64-encoded string navigator.camera.getpicture(onphotodatasuccess, onfail, { quality: 20, allowedit: true, destinationtype: destinationtype.data_url }); } // button call function // function getphoto(source) { // retrieve image file location specified source navigator.camera.getpicture(onphotourisuccess, onfail, { quality: 50, destinationtype: destinationtype.file_uri, sourcetype: source }); } // called if bad happens. // function onfail(message) { alert('failed because: ' + message); } </script> </head> <body> <button onclick="capturephoto();">capture photo</button> <br> <button onclick="capturephotoedit();">capture editable photo</button> <br> <button onclick="getphoto(picturesource.photolibrary);">from photo library</button><br> <button onclick="getphoto(picturesource.savedphotoalbum);">from photo album</button><br> <img style="display:none;width:60px;height:60px;" id="smallimage" src="" /> <img style="display:none;" id="largeimage" src="" /> </body> </html> hope help.
note:
you won't able open screen directly app using html.you have go through phonegap api if developing application using phonegap.
Comments
Post a Comment