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 plete 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>
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 plete 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>
- I also couldn't get iabRef.executeScript to return a value. I never get inside the callback function. This is working fine in IOS, but not on android. I was able to walk through the debug code in android and it looked ok. Were you able to get this to work? – TWilly Commented Nov 11, 2013 at 18:01
- I abandoned Cordova pletely and opted for writing my own interface between the webviews and the app. – Oliver Commented Dec 6, 2013 at 9:30
- Upgrading to phonegap 3.1 solved the issue for me. I targeted android kitkat and that broke things in phonegap 3.0. – TWilly Commented Dec 6, 2013 at 14:54
- FYI the latest ionic cordova plugin for IAB no longer takes a callback method, but instead returns a Promise<any> – FlavorScape Commented Feb 18, 2019 at 22:24
4 Answers
Reset to default 2Just a wild guess, but you're not executing this function...
{code: "var evaluateFeedback = function(){return 'Done';};evaluateFeedback();"}
or better: {code: "'Done';"}
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
check out this, it might be something you are looking for here
In the code string value, define a function and call it. The return value will e back in the callback's argument (or in ngCordova as the promise' resolved argument). Thanks to @Jonathan Adami for the suggestion.