我正在编写一个 phonegap 应用程序,它在 inAppBrowser 中启动一个 Web 应用程序。我想从这个网络应用程序中获得某些反馈,以便在我的 phonegap 应用程序中进一步使用它。
因此,用户启动 Web 应用程序,在那里执行一些操作,然后单击按钮,Web 应用程序将一个值返回给 phonegap 应用程序。
我想我可以使用 inAppBrowser 的 executeScript 方法来注入一个函数,该函数将在 Web 应用程序中使用一些事件被调用,并且当该函数被调用时,在 Web 应用程序中评估它的返回值。我发现的只是 phonegap 的不完整文档和 stackoverflow 上的这个问题: Augmenting a webapp with native capabilities - Bridging PhoneGap's InAppBrowser with Rails web app application javascript
遗憾的是,它并没有像我预期的那样工作,因为回调函数会立即触发,而无需等待注入的函数执行。
这是我的移动应用程序代码
<!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>
她是我的网络应用程序代码
<!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>