一、首先是网页端，这个就是一些简单的标签语言和JS函数：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>H5 And Android</title><script> //定义本地方法 效果提供给Android端调用 被调用后将获得参数值 function callH5(data){ document.getElementById("result").innerHTML="result success for Android to:"+data; } //定义本地点击事件 效果调用Android方法 传递参数给Android客服端 function myOnclick(){ document.getElementById("result").innerHTML="按钮被点击了" //调用android本地方法 调用对象由Android定义实例化，调用方法由Android提供 (具体对象名和方法待定，可变更) myObj.callAndroid("弹窗显示回调成功了～～～"); }
js调用android
注册js对象名称为control，方法为toNews，传的是新闻id和新闻类型
WebSettings webSettings = webView.getSettings(); // 设置WebView属性，能够执行Javascript脚本 webSettings.setJavaScriptEnabled(true); // 设置可以访问文件 webSettings.setAllowFileAccess(true); // 设置支持缩放 webSettings.setBuiltInZoomControls(true); webView.addJavascriptInterface(new JavaScriptInterfaces(), "control"); // 加载需要显示的网页 webView.loadUrl(url + "?newsId=" + newsId + "&newsType=" + newsType + "&subjectImg=" + imageUrl); String str = url + "?newsId=" + newsId + "&newsType=" + newsType + "&subjectImg=" + imageUrl; LogUtils.e(url + "?newsId=" + newsId + "&newsType=" + newsType + "&subjectImg=" + imageUrl); // 设置Web视图 webView.setWebViewClient(new webViewClient());// 如果去掉webView会用浏览器加载网络连接
class JavaScriptInterfaces { JavaScriptInterfaces() { } @JavascriptInterface public void toNews(long newsId, String accessUrl) { Intent intent = new Intent(SpecialWebActivity.this, NewsDetailsWebActivity.class); intent.putExtra("newsId", newsId + ""); startActivity(intent); } } </script></head><body> <button id="button" οnclick="myOnclick()">点击调用Android方法</button> <p/> <div id="result">效果展示</div> </body> </html>
二、接下来就是Android中加载web网页，并且设置完成交互了，直接上代码，也有详细注释:
package com.lvyerose.h5andandroid;
import android.annotation.SuppressLint;
import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.Toolbar;import android.view.View;import android.webkit.JavascriptInterface;import android.webkit.WebView;import android.widget.Toast;public class MainActivity extends AppCompatActivity {
private WebView mWebView; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar);mWebView = (WebView) findViewById(R.id.webView);
initWeb();}
@SuppressLint({"JavascriptInterface", "SetJavaScriptEnabled"})
void initWeb(){ //设置编码 mWebView.getSettings().setDefaultTextEncodingName("utf-8"); //支持js mWebView.getSettings().setJavaScriptEnabled(true);//设置本地调用对象及其接口
//第一个参数为实例化自定义的接口对象 第二个参数为提供给JS端调用使用的对象名 mWebView.addJavascriptInterface(new Contact() {@JavascriptInterface //必须加的注解
@Override public void callAndroid(String phone) { Toast.makeText(MainActivity.this, phone, Toast.LENGTH_LONG).show(); } }, "myObj"); //载入js mWebView.loadUrl("http://lvyerose.com/h5andAndroid.html");findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
@Override public void onClick(View v) { //Android调用Js方法，其中参数 'Android OK !!!' 可传入变量 效果如下： // mWebView.loadUrl("javascript:callH5('"+str+"')"); mWebView.loadUrl("javascript:callH5('Android OK !!!')");}
}); } //定义接口，提供给JS调用 interface Contact { @JavascriptInterface void callAndroid(String phone);}
}