1主页面布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="${relativePackage}.${activityClass}" >
<Button
android:id="@+id/btn_load_js"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="点击调用js(无参数)" />
<Button
android:id="@+id/btn_load_js_args"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="点击调用js(带参数)" />
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
2.MainActivity页面
package com.example.webviewdemo;
import android.app.Activity;
import android.content.Intent;
import android.graphics.Bitmap;
import android.net.Uri;
import android.os.Bundle;
import android.util.Log;
import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;
/*
webView创建流程:
1. 添加权限:AndroidManifest.xml中必须添加联网权限,否则会出Web page not available错误。
<uses-permission android:name="android.permission.INTERNET" />
2.在xml中添加一个WebView,或者直接用代码new一个WebView。简单来说,我们需要一个WebView的实例。
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
*/
public class MainActivity extends Activity implements OnClickListener {
// 创建一个webVIew的全局变量.
private WebView mWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initWebSettings();
loadUrl();
}
/**
* 加载URL
*/
private void loadUrl() {
// 加载网络的url地址
// mWebView.loadUrl("https://www.baidu.com/");
// 从assets目录下面的加载html
mWebView.loadUrl("file:///android_asset/test.html");
}
/**
* 初始化WebView的基本配置
*/
private void initWebSettings() {
// 启用WebView对JavaScript的支持
mWebView.getSettings().setJavaScriptEnabled(true);
// 设置JavascriptInterface
// javainterface实际就是一个普通的java类,里面是我们本地实现的java代码
// 将object 传递给webview,并指定别名,这样js脚本就可以通过我们给的这个别名来调用我们的方法
// 在代码中,TestInterface是实例化的对象,testInterface是这个对象在js中的别名
mWebView.addJavascriptInterface(new TestInterface(), "testInterface");
// 触摸焦点起作用(如果不设置,则在点击网页文本输入框时,不能弹出软键盘及不响应其他的一些事件)
mWebView.requestFocus();
// 取消滚动条
mWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
// 允许网页缩放
mWebView.getSettings().setSupportZoom(true);
// 把图片加载放在最后来加载渲染
mWebView.getSettings().setBlockNetworkImage(true);
mWebView.setWebViewClient(new WebViewClient() {
/**
* 给WebView加一个事件监听对象(WebViewClient)并重写shouldOverrideUrlLoading,
* 可以对网页中超链接按钮的响应
* 当按下某个连接时WebViewClient会调用这个方法,并传递参数:当前响应的的url地址
*/
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// 此处可添加一些逻辑:是否拦截此url,自行处理
// 下方2行代码是指在当前的webview中跳转到新的url
view.loadUrl(url);
Log.e("WebViewDemo", "shouldOverrideUrlLoading url:" + url);
return true;
}
/**
* WebView加载url完成时,会回调此api,可在这个api中隐藏加载进度框
*/
@Override
public void onPageFinished(WebView view, String url) {
// 此处可添加一些逻辑:隐藏加载进度框
Log.e("WebViewDemo", "onPageFinished");
}
/**
* WebView开始加载url时,会回调此api,可在这个api中显示加载进度框
*/
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
// 此处可添加一些逻辑:显示加载进度框
Log.e("WebViewDemo", "onPageStarted");
}
});
}
/**
* 初始化控件实例
*/
private void initView() {
mWebView = (WebView) findViewById(R.id.webview);
findViewById(R.id.btn_load_js).setOnClickListener(this);
findViewById(R.id.btn_load_js_args).setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btn_load_js: // Java调用JS
// 无参数调用
mWebView.loadUrl("javascript:javacalljs()");
break;
case R.id.btn_load_js_args: // Java调用JS并传递参数
String content = "hello js, form Android code!";
mWebView.loadUrl("javascript:javacalljswithargs('" + content + "')");
break;
default:
break;
}
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
// 是否按下返回键,且WebView现在的层级,可以返回
if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
// 返回WebView的上一页面
mWebView.goBack();
return true;
}
return super.onKeyDown(keyCode, event);
}
/**
* Js调用的JavascriptInterface
*/
public class TestInterface {
/**
* 因为安全问题,在Android4.2以后(如果应用的android:targetSdkVersion数值为17+)
* JS只能访问带有 @JavascriptInterface注解的Java函数。
*/
@JavascriptInterface
public void startCall() {
Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + 10086));
startActivity(intent);
}
@JavascriptInterface
public void showToast(String content) {
Toast.makeText(MainActivity.this, "js调用了java函数并传递了参数:" + content, Toast.LENGTH_SHORT).show();
}
}
}
3.html网页页面(在src下创建assets文件夹与java和res文件夹平级)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript">
function javacalljs(){
document.getElementById("content").innerHTML +=
"<br\>java调用了js函数";
}
function javacalljswithargs(arg){
document.getElementById("content").innerHTML +=
("<br\>"+arg);
}
</script>
</head>
<body>
这是一个HTML页面,页面有如下2个功能 <br/>
<br/>
<br/>
<a onClick="window.testInterface.startCall()">点击拨打10086</a><br/>
<a onClick="window.testInterface.showToast('我弹了一个Toast')" >点击弹出Toast,内容为“我弹了一个Toast”</a>
<br/>
<br/>
<br/>
<br/>
<div id="content">HTML内容显示区:</div>
</body>
</html>