android与H5之间的调用好久好久都没写博客了,最近一段很长的时间都很忙,然后状态也很不好,终于有时间写写博客了,今天就写下 android 与H5之间的调用吧! 内容也是蛮简单的。
目录如下:
(1)WebView
(2)android代码中调用HTML中的JavaScript的方法
(3)HTML中JavaScript调用android代码/或者方法
(1)说到WebView,网上其他博客有大量的讲解,我这里的话就简单列出代码就行了。(这里有个全面讲解WebView的 http://blog.csdn.net/carson_ho/article/details/52693322 )
WebView webView = new WebView(this);
WebSettings webSettings = webView.getSettings();
//设置支持javaScript脚步语言
webSettings.setJavaScriptEnabled(true);
//支持缩放按钮-前提是页面要支持才显示
webSettings.setBuiltInZoomControls(true);
//设置客户端-不跳转到默认浏览器中
webView.setWebViewClient(new WebViewClient());
//加载网络资源
webView.loadUrl("https://www.baidu.com");
//显示页面
setContentView(webView);
其中new WebViewClient(),你自己可以写一个类去继承 WebViewClient,然后里面会有很多方法,比如:
onPageStarted()//开始载入页面调用的方法
onPageFinished()//在页面加载结束时调用的方法
onLoadResource()//在加载页面资源时会调用,每一个资源(比如图片)的加载都会调用一次
可以参考上面的博客连接。
(2)android代码中调用HTML中的JavaScript的方法
接着重点讲,java代码中调用页面JavaScript的方法:
现在,我在Java代码中用WebView打开了一个HTML页面,然后,我想在Java代码中把一个值传递到HTML页面并显示,就要在Java代码中调用JavaScript的方法,然后页面就会执行JavaScript了,一句话,java代码调用JavaScript中的方法。
现在就举个列子,首先我在一个Activity中的TextView输入名字,然后点击一个按钮跳转到HTML页面,然后html页面显示刚才输入的名字。
OK!首先列出HTML页面(比较简单)
<html>
<head>
<script type="text/javascript">
//一个叫做javaCallJs 的JS方法
function javaCallJs(arg){
document.getElementById("content").innerHTML = ("你好!"+arg );
}
</script>
</head>
<body>
<p style="font-size:80px;" id="content"></p>
</body>
</html>
OK! 现在写Activity的代码
public class JavaAndJSActivity extends Activity implements View.OnClickListener {
private EditText name;
private Button btnLogin;
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
findViews();
}
private void findViews() {
setContentView(R.layout.activity_java_and_js);
name= (EditText) findViewById(R.id.et_name);
btnLogin = (Button) findViewById(R.id.btn_login);
btnLogin.setOnClickListener(this);
initWebView();//初始化WebView
}
private void initWebView() {
webView = new WebView(this);
WebSettings webSettings = webView.getSettings();
//设置支持javaScript脚步语言
webSettings.setJavaScriptEnabled(true);
//支持缩放按钮-前提是页面要支持才显示
webSettings.setBuiltInZoomControls(true);
//设置客户端-不跳转到默认浏览器中
webView.setWebViewClient(new WebViewClient());
//加载本地的html,就是上面的html页面
webView.loadUrl("file:///android_asset/call.html");//我是用的是android studio,所以我把html文件放在assets里面
}
@Override
public void onClick(View v) {
if (v == btnLogin) {
goToHtml();
}
}
private void goToHtml() {
String name= etNumber.getText().toString().trim();
webView.loadUrl("javascript:javaCallJs(" + "'" + name+ "'" + ")");//调用html里面JavaScript的方法
setContentView(webView);
}
}
这里的重点就是这个:
webView.loadUrl("javascript:javaCallJs(" + "'" + name+ "'" + ")");//调用html里面JavaScript的方法
这里是工程目录
对了,要记住添加网络的权限,在清单文件里面。
运行效果如下,我输入boy显示
(3)HTML中JavaScript调用android代码/或者方法
ok,接下来就是在html中,使用JavaScript方法调用android的方法。
展示HTML代码,很简单,就是在之前的html中加入一行代码,
加一个按钮
<input type="button" value="点击" οnclick="window.Android.showToast()" />
<html>
<head>
<script type="text/javascript">
function javaCallJs(arg){
document.getElementById("content").innerHTML = ("你好!"+arg );
}
</script>
</head>
<body>
<p style="font-size:80px;" id="content">小白</p>
<input type="button" value="点击" οnclick="window.Android.showToast()" />
</body>
</html>
public class JavaAndJSActivity extends Activity implements View.OnClickListener {
private EditText etNumber;
private Button btnLogin;
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
findViews();
}
private void findViews() {
setContentView(R.layout.activity_java_and_js);
etNumber = (EditText) findViewById(R.id.et_number);
btnLogin = (Button) findViewById(R.id.btn_login);
btnLogin.setOnClickListener(this);
initWebView();//初始化WebView
}
private void initWebView() {
webView = new WebView(this);
WebSettings webSettings = webView.getSettings();
//设置支持javaScript脚步语言
webSettings.setJavaScriptEnabled(true);
//支持缩放按钮-前提是页面要支持才显示
webSettings.setBuiltInZoomControls(true);
//设置客户端-不跳转到默认浏览器中
webView.setWebViewClient(new WebViewClient());
//设置支持js调用java
webView.addJavascriptInterface(new AndroidAndJSInterface(),"Android");
//加载本地的html,就是上面的html页面
webView.loadUrl("file:///android_asset/call.html");//我是用的是android studio,所以我把html文件放在assets里面
}
@Override
public void onClick(View v) {
if (v == btnLogin) {
goToHtml();
}
}
private void goToHtml() {
String numebr = etNumber.getText().toString().trim();
webView.loadUrl("javascript:javaCallJs(" + "'" + numebr + "'" + ")");
setContentView(webView);
}
/**
* js可以调用该类的方法
*/
class AndroidAndJSInterface{
@JavascriptInterface
public void showToast(){
Toast.makeText(JavaAndJSActivity.this, "我被js调用了", Toast.LENGTH_SHORT).show();
}
}
}
这里的重点就是这个,在初始化WebView的时候,使用该方法
//设置支持js调用java
webView.addJavascriptInterface(new AndroidAndJSInterface(),"Android");
这里
new AndroidAndJSInterface() 是下面写的内部类
/**
* js可以调用该类的方法
*/
class AndroidAndJSInterface{
@JavascriptInterface
public void showToast(){
Toast.makeText(JavaAndJSActivity.this, "我被js调用了", Toast.LENGTH_SHORT).show();
}
}
OK,显示效果如下:当点击点击按钮的时候,就弹出框!
我被js调用了
OK! 今天的博客就讲到这!Thank very much!