Js交互

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>