WebView简介（JavaScripte篇）

来源：互联网发布：ubuntu mate更改分辨率编辑：程序博客网时间：2024/06/11 17:21

原文：http://www.cnblogs.com/oakpip/archive/2011/04/08/2009800.html
如果访问的页面中有Javascript，则webview必须设置支持Javascript。
webview.getSettings().setJavaScriptEnabled(true);
我们来了解一下android中webview是如何支持javascripte自定义对象的，在w3c标准中js有 window，history，document等标准对象，同样我们可以在开发浏览器时自己定义我们的对象调用手机系统功能来处理，这样使用js就可以为所欲为了。

先看一个实例：

WebViewDemoActivity.java文件

package com.teleca.robin;

import android.app.Activity;

import android.os.Bundle;

import android.os.Handler;

import android.util.Log;

import android.webkit.WebSettings;

import android.webkit.WebView;

public class WebViewDemoActivity extends Activity {

/** Called when the activity is first created. */

final static String tag="robin";

WebView mWebView;

Handler mHandler=new Handler();

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.webviewdemo);

mWebView = (WebView) findViewById(R.id.webView);

WebSettings webSettings = mWebView.getSettings();

webSettings.setJavaScriptEnabled(true);

mWebView.addJavascriptInterface(new Object() {

public void clickOnAndroid() {

mHandler.post(new Runnable() {

public void run() {

mWebView.loadUrl("javascript:wave()");

Log.i(tag,"clickOnAndroid");

}

});

}

}, "demo");

mWebView.loadUrl("file:///android_asset/demo.html");

}

assets\demo.html文件

<html>

<!--

function wave() {

document.getElementById("droid").src="android_wave.png";

}

//-->

</script>

<body>

Hello,are you all right?

</a>

</body>

</html>

我们看addJavascriptInterface(Object obj,String interfaceName)这个方法，该方法将一个java对象绑定到一个javascript对象中，javascript对象名就是 “demo”，作用域是Global。这样初始化webview后，在webview加载的页面中就可以直接通过 javascript:window.demo访问到绑定的java对象了。

这样在javascript中就可以调用java对象的clickOnAndroid()方法了，同样我们可以在此对象中定义很多方法（比如发短信，调用联系人列表等手机系统功能。）,这里wave()方法是java中调用javascript的例子。

这里还有几个知识点：
1) 为了让WebView从apk文件中加载assets，Android SDK提供了一个schema，前缀为"file:///android_asset/"。WebView遇到这样的schema，就去当前包中的 assets目录中找内容。如上面的"file:///android_asset/demo.html"
2)addJavascriptInterface方法中要绑定的Java对象及方法不要直接在里面运行，这里是使用 Handler来进行的。

原文：http://www.cnblogs.com/oakpip/archive/2011/04/10/2011165.html

程序英文原址：http://code.google.com/p/apps-for-android/source/browse/trunk/Samples/WebViewDemo/

我对其进行了修改，并加了简单的注释，这个例子的不仅是对js的操作，它还对android浏览器做了简单的介绍，
这些我会在注释中一一讲解。
Javascript弹出框有如下三种：
JavaScript代码如下:

alert(); 或alert("alert");

window.confirm("Are you srue?");

window.prompt("Please input some word";,"this is text");

WebChromeClient 中对三种dialog进行了捕捉，但不幸的是，并没有回调函数可以使用，或者说不能获得用户是点击“OK”还是“CANCEL”的操作结果。
个人以为，这些方法的设置是为了对一些涉及到html操作的应用程序进行测试时使用的。
在WebChromeClient中还有以下的方法:
Java代码
    onProgressChanged(WebView view, int newProgress)；
    onReceivedIcon(WebView view, Bitmap icon)；
    onReceivedTitle(WebView view, String title)；
    onRequestFocus(WebView view)；
    onCloseWindow(WebView window)；
    onProgressChanged(WebView view, int newProgress)
这些方法的使用我会在以后的博文中讲到.
请大家先看今天讲解的重点
WebViewDemo2Activity.java文件

package com.teleca.robin;

import android.app.Activity;

import android.app.AlertDialog;

import android.content.DialogInterface;

import android.os.Bundle;

import android.os.Handler;

import android.util.Log;

import android.webkit.JsPromptResult;

import android.webkit.JsResult;

import android.webkit.WebChromeClient;

import android.webkit.WebSettings;

import android.webkit.WebView;

import android.widget.TextView;

public class WebViewDemo2Activity extends Activity {

/** Called when the activity is first created. */

final static String tag="robin";

WebView mWebView;

Handler mHandler=new Handler();

TextView mReusultText;

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.webviewdemo2);

mReusultText = (TextView) findViewById(R.id.textView);

mWebView = (WebView) findViewById(R.id.webView);

WebSettings webSettings = mWebView.getSettings();

mWebView.setWebChromeClient(new MyWebChromeClient());

webSettings.setJavaScriptEnabled(true);

mWebView.loadUrl("file:///android_asset/demo2.html");

}

/**

* 继承WebChromeClient类

* 对js弹出框时间进行处理

final class MyWebChromeClient extends WebChromeClient {

/**

* 处理alert弹出框

@Override

public boolean onJsAlert(WebView view,String url, String message,JsResult result) {

Log.d(tag,"onJsAlert:"+message);

mReusultText.setText("Alert:"+message);

//对alert的简单封装

new AlertDialog.Builder(WebViewDemo2Activity.this).

setTitle("Alert").setMessage(message).setPositiveButton("OK",

new DialogInterface.OnClickListener() {

@Override

public void onClick(DialogInterface arg0, int arg1) {

//TODO

}

}).create().show();

result.confirm();

return true;

}

/**

* 处理confirm弹出框

@Override

public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {

Log.d(tag, "onJsConfirm:"+message);

mReusultText.setText("Confirm:"+message);

result.confirm();

return super.onJsConfirm(view, url, message, result);

}

/**

* 处理prompt弹出框

@Override

public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {

Log.d(tag,"onJsPrompt:"+message);

mReusultText.setText("Prompt input is :"+message);

result.confirm();

return super.onJsPrompt(view, url, message, message, result);

}

demo2.html文件

<html>

<!--

function doAlert() {

alert("alert");

}

function doConfirm() {

window.confirm("Are you srue?")

}

function doPrompt() {

window.prompt("Please input some word","this is text");

}

//-->

</script>

<body>

alert("this is a alert")

</a>

<br>

window.confirm("Are you srue?")

</a>

<br>

window.prompt("Please input some word","this is text")

</a>

<br>

</body>

</html>