因项目需要,要在android界面加入webView然后实现互调,百度之后就写了一个Demo用于项目。
不多说了 直接上代码!
simple.html
<html>
<head>
<h1>
This is a HTML Page
</h1>
<!-- JavaScript脚本,主要包括了按钮要执行的函数,显示对话框等 -->
<script type="text/javascript">
//JavaScript方法,弹出对话框显示信息
function myFunction()
{
alert("调用html的弹框");
document.getElementById("test").innerHTML="<span>my</span>";
}
function onAlert()
{
console.log("onAlert method");//显示调试信息
alert("调用html的弹框");
}
function onConfirm()
{
console.log("onConfirm method");
var b = confirm("are you sure to login?");
alert("your choice is " + b);
}
function onPrompt()
{
console.log("onPrompt method");
var b = prompt("please input your password", "aaa");
alert("your input is " + b);
}
//调用绑定的Java对象的方法,即调用Android代码显示对话框
function showAndroidToast(toast)
{
myInterfaceName.showToast(toast);//注意此处的myInterfaceName要和外部传入的名字一致,大小写正确
}
function myHtmlTest()
{
alert("Android 调用html弹框方法");
}
</script>
</head>
<body>
<p>
<!-- 前四个按钮调用JS函数 -->
JavaScript函数调用 <br />
<button onclick="myFunction()">点击这里!</button>
<br />
<input type="button" value="alert" onclick="onAlert()" /> <br />
<input type="button" value="confirm" onclick="onConfirm()" /> <br />
<input type="button" value="prompt" onclick="onPrompt()" /><br />
<!-- 上面用了两种定义按钮的方式,效果一样的 -->
</p>
<p>
<!-- 这个Say hello 按钮调用Android代码中的方法 -->
用JavaScript按钮调用Android代码 <br />
<input type="button"
value="Say hello" onClick="showAndroidToast('Html的按钮调用Android方法')" />
</p>
<a href="http://www.google.com" />Google
</a>
</br>
<span id="test">ShowTest</span>
</body>
</html>
activity_webview.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:id="@+id/dojs_click_btn"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="点击此处调用js里面的方法"
android:layout_marginTop="10dp"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="上面的Button 调用Html(Alert)弹框"
android:paddingLeft="10dp"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="以下为本地WebView"
android:layout_marginTop="10dp"
android:paddingLeft="10dp"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Html按钮调用Adnroid(Toast)方法 "
android:paddingLeft="10dp"
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:background="#000"
android:padding="10dp"
android:layout_marginTop="10dp"
>
<WebView
android:id="@+id/location_webview"
android:layout_width="fill_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
</LinearLayout>
ActivityWebView
package com.example.androidmenutoabhost;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.Toast;
public class ActivityWebView extends Activity {
private Button mDojs_click_btn;
private WebView myWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_webview);
initLayout();
}
private void initLayout(){
mDojs_click_btn = (Button)this.findViewById(R.id.dojs_click_btn);
myWebView = (WebView)this.findViewById(R.id.location_webview);
// 得到设置属性的对象
WebSettings webSettings = myWebView.getSettings();
// 使能JavaScript
webSettings.setJavaScriptEnabled(true);
// 支持中文,否则页面中中文显示乱码
webSettings.setDefaultTextEncodingName("GBK");
// 限制在WebView中打开网页,而不用默认浏览器
myWebView.setWebViewClient(new WebViewClient());
myWebView.setWebChromeClient(new WebChromeClient(){
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
// TODO Auto-generated method stub
return super.onJsAlert(view, url, message, result);
}
});
// 用JavaScript调用Android函数:
// 先建立桥梁类,将要调用的Android代码写入桥梁类的public函数
// 绑定桥梁类和WebView中运行的JavaScript代码
// 将一个对象起一个别名传入,在JS代码中用这个别名代替这个对象,可以调用这个对象的一些方法
myWebView.addJavascriptInterface(new WebAppInterface(this),
"myInterfaceName");
// 载入页面:本地html资源文件
myWebView.loadUrl("file:///android_asset/simple.html");
// 这里用一个Android按钮按下后调用JS中的代码
mDojs_click_btn.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// 用Android代码调用JavaScript函数:
myWebView.loadUrl("javascript:myHtmlTest()");
}
});
}
/**
* 自定义的Android代码和JavaScript代码之间的桥梁类
*/
public class WebAppInterface
{
Context mContext;
/** Instantiate the interface and set the context */
WebAppInterface(Context c)
{
mContext = c;
}
/** Show a toast from the web page */
// 如果target 大于等于API 17,则需要加上如下注解
// @JavascriptInterface
public void showToast(String toast)
{
// Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
Toast.makeText(mContext, toast, Toast.LENGTH_LONG).show();
}
}
}
另:
网页按钮按下后不出现JS对话框是因为没有设置chrome handler,需要设置如下
myWebView.setWebChromeClient(new WebChromeClient()
{
@Override
public boolean onJsAlert(WebView view, String url, String message,
JsResult result)
{
// TODO Auto-generated method stub
return super.onJsAlert(view, url, message, result);
}
});