如何控制的JavaScript在Android中的PhoneGap [英] how to control javascript in android phonegap
本文介绍了如何控制的JavaScript在Android中的PhoneGap的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是新的PhoneGap的，刚开始学习吧...
I am new in phonegap, just start learning it...
我从上phonegap.com给出的教程演示应用程序，这是我的index.html
I made a demo application from the tutorials given on the phonegap.com, This is my index.html
<!DOCTYPE HTML>
<html>
<head>
<title>mobiletuts phonegap</title>
<script src="cordova-2.7.0.js"></script>
<script>
var pictureSource;
var destinationType;
document.addEventListener("deviceready",onDeviceReady,false);
document.addEventListener("backbutton", function(e){
if($.mobile.activePage.is('index.html')){
e.preventDefault();
navigator.app.exitApp();
}
else {
navigator.app.backHistory()
}
}, false);
function onDeviceReady()
{
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
function onPhotoDataSuccess(imageData)
{
var smallImage = document.getElementById('smallImage');
smallImage.style.display = 'block';
smallImage.src = "data:image/jpeg;base64," + imageData;
}
function onPhotoURISuccess(imageURI)
{
var largeImage = document.getElementById('largeImage');
largeImage.style.display = 'block';
largeImage.src = imageURI;
}
function capturePhoto()
{
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
destinationType: destinationType.DATA_URL });
}
function capturePhotoEdit()
{
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
destinationType: destinationType.DATA_URL });
}
function getPhoto(source)
{
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source });
}
function onFail(message)
{
alert('Failed because: ' + message);
}
function onSuccess(position)
{
var element = document.getElementById('geolocation');
element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '<br />' +
'Altitude: ' + position.coords.altitude + '<br />' +
'Accuracy: ' + position.coords.accuracy + '<br />' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '<br />' +
'Heading: ' + position.coords.heading + '<br />' +
'Speed: ' + position.coords.speed + '<br />' +
'Timestamp: ' + position.timestamp + '<br />';
}
function onError(error)
{
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
function onLoad(){
document.addEventListener("deviceready", onDeviceReady, false);
}
function changeBG(){
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
destinationType: destinationType.DATA_URL });
document.bgColor = '#aaa';
}
function Alert()
{
alert('Ther alert dialog from the javascript method');
}
function onAlert()
{
AndroidFunction.showAlert();
}
</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>
<button onClick="Alert();">Show Alert msg from javascript</button><br>
<button onClick="onAlert();">Show Alert msg from java</button><br>
<p id="geolocation">Finding geolocation...</p>
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
<img style="display:none;" id="largeImage" src="" />
</body>
</html>
它正常工作，但现在我想控制从Java的一些功能，所以我做了布局文件中的web视图，并在Java文件中宋的变化，这是我的java code ...
It works properly, but now i want to control some functions from the java, so i made a webview in layout file, and make sone changes in java file, here is my java code...
public class MainActivity extends Activity {
WebView webView;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = (WebView) findViewById(R.id.webView);
JavaScriptInterface myJavaScriptInterface = new JavaScriptInterface(
this);
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(myJavaScriptInterface, "AndroidFunction");
webView.loadUrl("file:///android_asset/www/index.html");
webView.setWebViewClient(new MyWebViewClient());
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
// TODO Auto-generated method stub
if (resultCode != RESULT_CANCELED) {
if (requestCode == 33) {
/*
* Bitmap photo = (Bitmap) data.getExtras().get("data");
* imageView.setImageBitmap(photo);
*/
}
}
}
public class JavaScriptInterface {
Context mContext;
JavaScriptInterface(Context c) {
mContext = c;
}
@JavascriptInterface
public void showToast(String toast) {
Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
}
@JavascriptInterface
public void showAlert() {
webView.loadUrl("javascript:Alert()");
}
@JavascriptInterface
public void startNewActivity() {
Intent intent = new Intent(MediaStore.ACTION_VIDEO_CAPTURE);
startActivity(intent);
}
}
class MyWebViewClient extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (Uri.parse(url).getHost()
.equals("file:///android_asset/www/index.html")) {
// This is my web site, so do not override; let my WebView load
// the page
return false;
}
// Otherwise, the link is not for a page on my site, so launch
// another Activity that handles URLs
Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
startActivity(intent);
return true;
}
}
}
现在我要调用从JavaScript的Java方法，让我有添加一个按钮，并在index.html的具有两个脚本方法，他们是...
Now i want to call java methods from the javascript, so that i have add a button and two script methods in index.html, they are...
function Alert()
{
alert('Ther alert dialog from the javascript method');
}
function onAlert()
{
AndroidFunction.showAlert();
}
添加一个按钮来调用onAlert（）函数，但是当我在设备上运行，没有任何按钮，将工作... 我无法理解有什么问题，谁能帮我....
add a button to call onAlert() function, But when i run it on device, no button will work... I cant understand what is the issue, can anyone help me....
推荐答案
在你的情况下，有必要为嵌入科尔多瓦的WebView在Android 这里的它链接
In your case there is a need to Embedding Cordova WebView on Android here is link for it
修改您的主要活动为
public class MainActivity extends Activity implements CordovaInterface {
CordovaWebView cwv;
/* Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
cwv = (CordovaWebView) findViewById(R.id.tutorialView);
cwv.loadUrl("file:///android_asset/www/index.html");
}
而在你的布局，取代你的WebView
And in your layout replace your webview with
<org.apache.cordova.CordovaWebView
android:id="@+id/tutorialView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
这篇关于如何控制的JavaScript在Android中的PhoneGap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
