Menu
I am writing a phonegap app, that's starting a web app inside an inAppBrowser. I would like to get certain feedback from this web app to use it further in my phonegap app.
So the user starts the web app, does some things there and upon clicking a button, the web app returns a value to the phonegap app.
I thought I could use the executeScript method of the inAppBrowser to inject a function, that would be called inside the web app using some event, and when that function is called, evaluate its return value inside the web app. All I found was the not very complete documentation of phonegap and this question on stackoverflow: Augmenting a webapp with native capabilities - Bridging PhoneGap's InAppBrowser with Rails web app application javascript
Sadly it does not work as I expected, because the callback function fires imediately, without waiting for the injected function to execute.
Here is my mobile app code
<!DOCTYPE html>
<html>
<head>
<title>InAppBrowser.executeScript Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Global InAppBrowser reference
var iabRef = null;
// Inject our custom JavaScript into the InAppBrowser window
//
function addFeebackFunction() {
iabRef.executeScript(
{code: "var evaluateFeedback = function(){return 'Done';};"},
function(data) {
alert(data);
}
);
//iabRef.close();
}
function iabClose(event) {
iabRef.removeEventListener('loadstop', addFeebackFunction);
iabRef.removeEventListener('exit', iabClose);
}
// Cordova is ready
//
function onDeviceReady() {
iabRef = window.open('http://{ipaddress}/test/', '_blank', 'location=no');
iabRef.addEventListener('loadstop', addFeebackFunction);
iabRef.addEventListener('exit', iabClose);
}
</script>
</head>
<body>
<h1>Mobile App</h1>
</body>
</html>
And her is my web app code
<!DOCTYPE HTML>
<html>
<head>
<title>
Test
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#get-feedback').click(function() {
var feedback = $('#feedback').val();
evaluateFeedback(feedback);
});
});
</script>
</head>
<body>
<div data-role="page">
<article data-role="content">
<h1>Web app</h1>
<input type="text" id="feedback" /><br />
<button type="button" id="get-feedback">Feedback</button>
</article>
</div>
</body>
</html>
371
Just a wild guess, but you're not executing this function...
{code: "var evaluateFeedback = function(){return 'Done';};evaluateFeedback();"}
or better: {code: "'Done';"}
107
ref.addEventListener('loadstart', function(event){
//alert('start: ' + event.url);
});
ref.addEventListener('loadstop', function(event){
//alert('stop: ' + event.url);
});
ref.addEventListener('loaderror', function(event){
//alert('error: ' + event.message);
});
ref.addEventListener('exit', function(event){
});
Use above for events for taking return value back in the application
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
